frontend: NumberTextField gives each input its own id
Every NumberTextField had id="frame_time", so the ids repeated on a page and a label could point at another field's input. The id now comes from useId(). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HVeDQsU5a8AJUdJPgWevAK
This commit is contained in:
1 parent
8f3ba8d389
commit
b1d9bb3988
1 file changed
+4
-2
@@ -1,4 +1,4 @@
|
||||
import {ChangeEvent, memo, ReactNode, useEffect, useState} from 'react';
|
||||
import {ChangeEvent, memo, ReactNode, useEffect, useId, useState} from 'react';
|
||||
|
||||
import {
|
||||
InputAdornment, SxProps,
|
||||
@@ -38,6 +38,8 @@ function NumberTextField({start_val, default: defaultValue, label, callback, cou
|
||||
const [text, setText] = useState(".");
|
||||
const [err, setErr] = useState(true);
|
||||
const [val, setVal] = useState(0);
|
||||
// Unique per field, so each label points at its own input
|
||||
const id = useId();
|
||||
|
||||
// Something has to change in parent to trigger setup => otherwise this makes infinite loop.
|
||||
// In case of error state start_val could stay same, but we want to return to "safe" set
|
||||
@@ -79,7 +81,7 @@ function NumberTextField({start_val, default: defaultValue, label, callback, cou
|
||||
callback(new_val, new_err);
|
||||
};
|
||||
|
||||
return <TextField id="frame_time" label={label} variant="outlined"
|
||||
return <TextField id={id} label={label} variant="outlined"
|
||||
sx = {sx}
|
||||
error={err}
|
||||
onChange={updateValue}
|
||||
|
||||
Reference in new issue
Block a user