I'm building a simple form in chakra-ui with a controlled field. Whenever the user types in an input after a single keystroke focus moves to the next field.
I think there's a bug with react re-rendering the page, and the focus being "off by one" but it's a basic form and pretty frustrating! I can't see any google info on the topic but I've noticed this before when doing forms with Chakra.
The code is as simple as this, but I do have some other form elements on the same page.
docs example
const [taskName, setTaskName] = useState('')
const updateTaskName = event => setTaskName(event.target.value)
<Input
// autoFocus={false} // no effect
placeholder='short name for task'
value={taskName}
onChange={updateTaskName}
// onBlur={evt => sanitizeTaskName(evt.target.value)}
/>
Is there a better way to do this, without bringing in a huge Formik type form library?