From 93c7c792db78250e33e037c33c2d363fb23d152a Mon Sep 17 00:00:00 2001 From: Hiren Kangad Date: Thu, 12 Mar 2026 22:15:20 +0530 Subject: [PATCH] fix(text): use requestAnimationFrame for editor open timing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit queueMicrotask fires before the click event settles, causing the textarea to blur immediately and trigger empty-text cleanup. requestAnimationFrame waits one paint frame — enough for the pointer event to fully resolve without the sluggishness of setTimeout(50). --- frontend/src/canvas/tools.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/canvas/tools.ts b/frontend/src/canvas/tools.ts index f3bac0b..4177571 100644 --- a/frontend/src/canvas/tools.ts +++ b/frontend/src/canvas/tools.ts @@ -130,8 +130,8 @@ export function activateTool( const canvasEl = container.querySelector('canvas'); const domContainer = canvasEl?.parentElement ?? container; - // Use microtask instead of 50ms delay — PixiJS only needs one tick - queueMicrotask(() => { + // Wait one frame so the click event settles before focusing textarea + requestAnimationFrame(() => { ctx.textEditor!.startEditing(item, viewport, domContainer, () => { // If user saved empty text, remove the item const text = (item.data as any).text?.trim(); @@ -359,8 +359,8 @@ export function activateTool( const canvasEl = container.querySelector('canvas'); const domContainer = canvasEl?.parentElement ?? container; - // Use microtask instead of 50ms delay — PixiJS only needs one tick - queueMicrotask(() => { + // Wait one frame so the click event settles before focusing textarea + requestAnimationFrame(() => { ctx.textEditor!.startEditing(item, viewport, domContainer, () => { // Cleanup rule — fires on BOTH save and cancel (stopEditing always calls _onChange): // - new sticky + cancel/blur with empty text => remove (no blank notes left behind)