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:
@@ -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>
|
||||
|
||||
|
||||
@@ -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 }));
|
||||
}}
|
||||
/>
|
||||
|
||||
{/*
|
||||
|
||||
Reference in New Issue
Block a user