read the input value before the updater runs

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>
This commit is contained in:
2026-09-01 20:16:22 +01:00
co-authored by Claude Opus 5
parent 5b4571ddd7
commit 173e917838
2 changed files with 16 additions and 3 deletions
+10 -2
View File
@@ -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>
+6 -1
View File
@@ -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 }));
}}
/>
{/*