7

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?

dcsan
  • 11,333
  • 15
  • 77
  • 118

0 Answers0