CODEWITHSUNDEEP
reactjsformik
Stiaan Wolfaardt
Stiaan Wolfaardt

Reputation: 89

How to set autoFocus on input field in Formik form?

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

Upvotes: 6

Views: 9759

Answers (4)

cprincec
cprincec

Reputation: 11

To have a Formik Field component auto-focused, add the autoFocus prop to the Field component as shown below:

<Field 
autoFocus={true}
type="text"
name="barcode1"  
/>

Upvotes: 1

Farrokh Rostami Kia
Farrokh Rostami Kia

Reputation: 83

you can use useEffect combined with the document.getElementByName. Here is how;

run useEffect just once using empty bracets:

  useEffect(() => {
    document.getElementsByName("name of your formik element")[0].focus();

    // following is optional
    return () => {
      formik.resetForm();
    }
  }, []);

Upvotes: 2

Stiaan Wolfaardt
Stiaan Wolfaardt

Reputation: 89

For those coming along in the future:

I was using a React class component in this question. I managed to solve the problem by adding a method that handles the focus. by getting an element by ID in the DOM.

focusChange(nextField) {
 if(document.getElementById(nextField) === null){
   return;
 }
 document.getElementById(nextField).focus();

}

And then in the render method of the class I checked for a key event. The keycode 13(enter) check was to prevent a submit of the form.

const onKeyDown = (keyEvent) => {
     if ((keyEvent.charCode || keyEvent.keyCode) === 13) {
       this.focusChange(this.state.nextBarcode);
       keyEvent.preventDefault();
       keyEvent.keyCode = 9;
     }
   }

I added the method to my Formik form:

<Form onKeyDown={onKeyDown}>

And the actual input field that comes from PrimeReact looks like:

<InputText
      className="p-inputtext"
      id='barcode4'
      onChange={(e) => this.setState({barcode4: e.target.value, nextBarcode: 'barcode5'})}
      value={this.state.barcode4}
      style={{ width: 250 }} />

So the solution for me was document.getElementById("myID").focus();

Upvotes: 0

IP Talks
IP Talks

Reputation: 69

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

<TextInput autoFocus={true} />

and see the result

Upvotes: 6

Related Questions