fix: defer contenteditable blur linkification to unblock mobile tap events

When a contenteditable loses focus, the onblur handler immediately modified
innerHTML to linkify URLs. On mobile, this DOM mutation causes a layout reflow
between touchstart and click, making the browser cancel taps on the adjacent
delete button. Deferring via requestAnimationFrame ensures the click event
fires before the DOM is modified.

https://claude.ai/code/session_01VZceWPhHMHCA6SELBdCPfN
This commit is contained in:
Claude
2026-04-10 21:53:20 +02:00
committed by Fred Cabassut
parent 76b04549af
commit 86cfc8c5f6
+8 -1
View File
@@ -324,7 +324,14 @@
onkeydown={(e) => handleKeydown(e, item.id)}
onclick={handleLinkClick}
onpaste={handlePaste}
onblur={(e) => { (e.target as HTMLElement).innerHTML = linkifyText(item.text); }}
onblur={(e) => {
const el = e.target as HTMLElement;
requestAnimationFrame(() => {
if (el.isConnected && document.activeElement !== el) {
el.innerHTML = linkifyText(item.text);
}
});
}}
class="flex-1 min-w-0 bg-transparent text-sm outline-none break-words {item.checked ? 'text-[var(--text-muted)] line-through' : 'text-[var(--text)]'}"
data-placeholder="List item"
aria-placeholder="List item"