From 647905a447229416c0d276dcab6d48a9e674bc36 Mon Sep 17 00:00:00 2001
From: messiawrq-design <messiawrq.design@gmail.com>
Date: Tue, 26 May 2026 04:44:29 +0000
Subject: [PATCH] fix(tasks): prevent stack overflow on heavy emoji toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #10. When toggling a task with complex ZWJ emoji sequences
(like 👨‍👩‍👧‍👦) in Safari, synchronous DOM replacement via `render()`
can trigger a stack overflow during event dispatch. Wrapping the state
update and render in a `setTimeout` breaks the call stack and
prevents the browser crash.

Bounty Wallet: 6sF8p22Gg83NKTJ6dvya7Srv4USCniZnP47DwQwK7Mtp (Solana) / Algora
---
 src/app.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app.js b/src/app.js
index fe0e9c1..0b14005 100644
--- a/src/app.js
+++ b/src/app.js
@@ -24,9 +24,11 @@ function render() {
     checkbox.type = "checkbox";
     checkbox.checked = task.done;
     checkbox.addEventListener("change", () => {
-      tasks = toggleTask(tasks, task.id);
-      save(tasks);
-      render();
+      setTimeout(() => {
+        tasks = toggleTask(tasks, task.id);
+        save(tasks);
+        render();
+      }, 0);
     });
 
     const label = document.createElement("span");