How to set autoFocus on input field in Formik form?

Question

I am trying to set auto focus on input fields in a Formik form using React. What is the standard way of doing this?

My code is below:

                                         <img src="images/barcode-small.png" alt="Barcode Small" />
                                       </td>
                                       <td>
                                         <Field name="barcode1"
                                                type="text"
                                                className="p-inputtext"
                                                autocomplete="off"
                                                style={{ width: 250 }}/>
                                       </td>

I've tried simply adding the autoFocus attribute to the Field but that didn't seem to work. In my dev tools I am getting the following error:

How do I check what is blocking the focus? Thanks

Read the error. It says another element is already focused. That is why the auto-fosus for you is not working. — Muhammad Ali
Yeah it must be built in Formik. Seems like its the form Submit button. Do you know how to bypass this? — Stiaan Wolfaardt
You would have to show me the whole code of the file. Without it I can't help. — Muhammad Ali
@StiaanWolfaardt: As per the comments and error, I reckon, you have added the autoFocus attribute to all Field elements and not just one. Please paste-in the full code so that the community can help you better without any guesses😊. — Santhosh John

IP Talks IP Talks · Accepted Answer · 2020-09-09T11:03:38

you can simply use TextInput to do this, as i have done Just add a property of

<TextInput autoFocus={true} />

and see the result

How to set autoFocus on input field in Formik form?

1 Answers