How to set autoFocus on input field in Formik form?

3
votes

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: Browser dev error

How do I check what is blocking the focus? Thanks

1
reactjsformik
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

1 Answers

2
votes

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

<TextInput autoFocus={true} />

and see the result