fix: prevent modal backdrop from catching the originating tap on mobile

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
This commit is contained in:
Claude
2026-03-11 19:24:06 +01:00
committed by Fred Cabassut
parent 81867c57d4
commit b08ef84d43
+17
View File
@@ -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;
}