From 51bfda3aec886054492105e90831bd07dfd6d8d2 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 11 Mar 2026 18:13:41 +0000 Subject: [PATCH] fix: prevent modal backdrop from catching the originating tap on mobile MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On mobile, tapping a NoteCard to open the editor produces synthetic mouse events (mousedown → mouseup → click) at the original touch coordinates. If those coordinates land on the overlay backdrop rather than the editor card, the mousedown sets mousedownOnOverlay = true and the click immediately closes the editor — causing a brief flicker. Guard against this by deferring overlay readiness to the next animation frame after mount, so any synthetic events from the originating tap are ignored. https://claude.ai/code/session_011C8bfgShjDSmDr3rUCb2gw --- src/lib/components/NoteEditor.svelte | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/lib/components/NoteEditor.svelte b/src/lib/components/NoteEditor.svelte index 7a92348..64a1911 100644 --- a/src/lib/components/NoteEditor.svelte +++ b/src/lib/components/NoteEditor.svelte @@ -142,7 +142,24 @@ // but we only want to close if the press also started there. let mousedownOnOverlay = false; + // On mobile, the tap that opens the editor produces synthetic mouse events + // (mousedown → mouseup → click) at the original touch coordinates. If those + // coordinates land on the overlay backdrop, the editor would close instantly. + // Guard against this by ignoring mousedowns that arrive within the first + // animation frame after mount. + let overlayReady = false; + $effect(() => { + const id = requestAnimationFrame(() => { + overlayReady = true; + }); + return () => { + overlayReady = false; + cancelAnimationFrame(id); + }; + }); + function handleOverlayMousedown(e: MouseEvent) { + if (!overlayReady) return; mousedownOnOverlay = e.target === e.currentTarget; }