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>
|
<label className="text-xs">Name</label>
|
||||||
<Input
|
<Input
|
||||||
value={draft.name}
|
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>
|
</div>
|
||||||
|
|
||||||
@@ -78,7 +83,10 @@ export const BandSettings = ({
|
|||||||
<Input
|
<Input
|
||||||
value={draft.title}
|
value={draft.title}
|
||||||
placeholder="No heading"
|
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>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -100,7 +100,12 @@ export const BlockSettings = ({
|
|||||||
<Input
|
<Input
|
||||||
value={draft.title}
|
value={draft.title}
|
||||||
placeholder="No heading"
|
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