From 173e917838647fbfb3a3eb266b5ac6a1ecda3d62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Tue, 1 Sep 2026 20:16:22 +0100
Subject: [PATCH] read the input value before the updater runs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

React nulls `currentTarget` once the handler returns, and a functional state
updater runs after that — so typing one character into a band's name threw and
took the whole editor panel down.

Three places, all mine from today. Everything older read the value eagerly.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 web/sections/BandSettings.tsx  | 12 ++++++++++--
 web/sections/BlockSettings.tsx |  7 ++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/web/sections/BandSettings.tsx b/web/sections/BandSettings.tsx
index d9a8dc3..fabd04f 100644
--- a/web/sections/BandSettings.tsx
+++ b/web/sections/BandSettings.tsx
@@ -69,7 +69,12 @@ export const BandSettings = ({
         <label className="text-xs">Name</label>
         <Input
           value={draft.name}
-          onChange={(event) => setDraft((was) => ({ ...was, name: event.currentTarget.value }))}
+          onChange={(event) => {
+            // Read NOW. React nulls `currentTarget` when the handler returns, and a functional updater
+            // runs after that — so reading it inside one throws on the first keystroke.
+            const value = event.currentTarget.value;
+            setDraft((was) => ({ ...was, name: value }));
+          }}
         />
       </div>
 
@@ -78,7 +83,10 @@ export const BandSettings = ({
         <Input
           value={draft.title}
           placeholder="No heading"
-          onChange={(event) => setDraft((was) => ({ ...was, title: event.currentTarget.value }))}
+          onChange={(event) => {
+            const value = event.currentTarget.value;
+            setDraft((was) => ({ ...was, title: value }));
+          }}
         />
       </div>
 
diff --git a/web/sections/BlockSettings.tsx b/web/sections/BlockSettings.tsx
index a919a08..9788aaa 100644
--- a/web/sections/BlockSettings.tsx
+++ b/web/sections/BlockSettings.tsx
@@ -100,7 +100,12 @@ export const BlockSettings = ({
       <Input
         value={draft.title}
         placeholder="No heading"
-        onChange={(event) => setDraft((was) => ({ ...was, title: event.currentTarget.value }))}
+        onChange={(event) => {
+          // Read NOW — see the note in BandSettings. A functional updater runs after the handler has
+          // returned, and `currentTarget` is null by then.
+          const value = event.currentTarget.value;
+          setDraft((was) => ({ ...was, title: value }));
+        }}
       />
 
       {/*