I’m using React, the parent component prints out child components, each time creating multiple inputs inside the parent. When you update the input, I’m updating some state, the child is re-rendering loses the focus on the input.
Is there a way to keep the focus after re-rendering?
I try using the id of the input element, not working:
const ref: any = useRef();
useEffect(() => {
if (ref.current) {
ref.current[fixture.id].focus();
}
}, []);
return (
<input
id={fixture.id}
ref={ref}
type="number"
value={home}
onChange={handleChangeHome}
min={0}
max={10}
/>
)
Remember there are multiple input elements so when I just do:
useEffect(() => {
if (ref.current) {
ref.current.focus();
}
}, []);
The focus defaults to the last input field after component is rendered