Hermes/refboard-ayon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix(text): use requestAnimationFrame for editor open timing

Browse Source 
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).
This commit is contained in:
Hiren Kangad
2026-03-12 22:15:20 +05:30
parent d365049470
commit 93c7c792db
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/canvas/tools.ts
+4 -4
View File
@@ -130,8 +130,8 @@ export function activateTool(
const canvasEl = container.querySelector('canvas'); const canvasEl = container.querySelector('canvas');
const domContainer = canvasEl?.parentElement ?? container; const domContainer = canvasEl?.parentElement ?? container;
// Use microtask instead of 50ms delay — PixiJS only needs one tick // Wait one frame so the click event settles before focusing textarea
queueMicrotask(() => { requestAnimationFrame(() => {
ctx.textEditor!.startEditing(item, viewport, domContainer, () => { ctx.textEditor!.startEditing(item, viewport, domContainer, () => {
// If user saved empty text, remove the item // If user saved empty text, remove the item
const text = (item.data as any).text?.trim(); const text = (item.data as any).text?.trim();
@@ -359,8 +359,8 @@ export function activateTool(
const canvasEl = container.querySelector('canvas'); const canvasEl = container.querySelector('canvas');
const domContainer = canvasEl?.parentElement ?? container; const domContainer = canvasEl?.parentElement ?? container;
// Use microtask instead of 50ms delay — PixiJS only needs one tick // Wait one frame so the click event settles before focusing textarea
queueMicrotask(() => { requestAnimationFrame(() => {
ctx.textEditor!.startEditing(item, viewport, domContainer, () => { ctx.textEditor!.startEditing(item, viewport, domContainer, () => {
// Cleanup rule — fires on BOTH save and cancel (stopEditing always calls _onChange): // 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) // - new sticky + cancel/blur with empty text => remove (no blank notes left behind)