Set input field focus on each step

[DiegoMcDipster]

Hi,

I'm using the step wizard to create a quiz. Each step has a question, a formik field for the answer and a button that moves to the next step if the validation is passed.

I want the focus to be set on the input field on each step. However:

• The autoFocus works on Step1.
• The autoFocus does NOT work on Step 2, 3... etc etc.

So, my question is what's the best way of implementing input field focus on each step?

Thanks in advance for you assistance.

[resolritter]

Try focusing the element manually

const [element, setElement] = React.useState()
React.useLayoutEffect(() => {
  if (element) {
    element.focus()
  }
}, [element])

<Component ref={setElement} />

[DiegoMcDipster]

Thanks @resolritter for the quick response.

Unfortunately, that didn't work. I'm still getting the same behaviour.

On the README.md you have a demo 'Create Your Account to Apply' wizard. Would you be kind enough to put that code in a sandbox so that i can play around with it. That will help me to get insight into what i've done wrong in my code. (I don't want to post my code here because it's too complex (for example, I'm using Formik and a reusable component that renders by looping through an array of questions/answers) and I don't want to waste your time with you trying to figure it out)

I'd really appreciate it if you would do that.

Again thanks!

[resolritter]

There's already a demo application at https://github.com/jcmcneal/react-step-wizard/tree/master/app

and some NPM commands you can try using for running it https://github.com/jcmcneal/react-step-wizard/blob/76723d6b8105a720f1968fa0c60128c780105337/package.json#L11

[resolritter]

Closing since I don't see an action to be taken here. Events and lifecycle-related quirks are not a concern for this library, so this question seems more like a userland struggle which would be better suited on e.g. Stack Overflow.