How to set focus on an input field after rendering in ReactJS?

React JS Javascript Library Front End Technology

While working with the forms in React, sometimes we may require to focus on any input. For example, we want to enable the submit button only if the user enters some text in the input field. In such cases, we can focus on the input so that users know that they have to enter some text in the input field to enable the button.

In this tutorial, we will learn multiple ways to focus on the input field after rendering in ReactJS.

Use the autoFocus attribute with the input field

We can use the autofocus attribute in HTML to focus on the input field, but we need to use the attribute in camelCase like autoFocus.

When we pass the autoFocus attribute to any input field, it becomes automatically focused after rendering in ReactJS.

Syntax

Users can follow the syntax below to use the autoFocus attribute to focus on an input field after rendering in ReactJS.

<input id = "name" autoFocus />

In the above syntax, we created the simple input and used the autoFocus attribute.

Example

In the example below, we have created the input field. Also, we have bound the focusText variable as a value of the input field. Also, we handle the input value using the handleInput() function.

As we have added the autoFocus attribute to the input field, it automatically creates focus on the input field whenever we refresh the web page.

#App.js

import React, { useState } from "react";

export default function App() {
   const [foucsText, setFocusText] = useState(true);
   function handleInput(event) {
      let value = event.target.value;
      setFocusText(value);
   }
   return (
      <div className = "App">
         <h2>
            {" "}
            Using the <i> autoFocus </i> attribute with an input field to set focus on
            input after rendering. {" "}
         </h2>
         <label for = "name"> Enter some text: </label>
         <br></br>
         <input id = "name" autoFocus onInput = {handleInput} value = {foucsText} />
      </div>
   );
}

Output

Use the ref and componentDidMount() method

The ref allows us to store the reference of any HTML element in the variable. So, we can use the ref to store the input element in any variable. After that, we can use the focus() method with the variable to focus on the input.

The componentDidMount() method is a life cycle method in ReactJS. It automatically executes when the rendering of the component completes. So, we can use the focus() method with the input variable inside the componentDidMount() method to set focus on the input after rendering.

Syntax

Users can follow the syntax below to use ref with the input element to focus on the input element.

<input
   ref = {(inp) => {
      inp.focus();
   }}
/>

In the above syntax, we have used the ref, which takes the callback function as a value, and in the callback function, we used the focus() method to set focus on the input element.

Example

In the example below, we have created two input elements. We have used the ref with the second input, and the first input is normal without the ref attribute.

The ref attribute takes the callback function as a value. The callback function takes a single parameter referring to the input with ‘ref’ is used. After that, we can use the focus() method with that input and set focus on the input element.

import React from "react";

class App extends React.Component {
   render() {
      return (
         <div>
            <h2>
               {" "}
               Using the <i> refs </i> with an input field to set focus on
               input after rendering.{" "}
            </h2>
            <input defaultValue = "This input is not focused!" />
            <br></br>
            <br></br>
            <input
               ref = {(inp) => {
                  inp.focus();
               }}
               defaultValue = "This is focused input!"
            />
         </div>
      );
   }
}
export default App;

Output

In the above output, users can observe that the first input is unfocused, and the second is focused.

Example

In the example below, we take the input reference using the ‘ref’ attribute. After that, we used the componentDidMount() method in the class component, and in the method, we accessed the input and used the focus() method to set focus on the element.

import React from "react";

class App extends React.Component {
   componentDidMount() {
      this.secondInput.focus();
   } 
   render() {
      return (
         <div>
            <h2>
               {" "}
               Using the <i> refs and componentDidMount() method </i> with an input
               field to set focus on input after rendering.{" "}
            </h2>
            <input
               defaultValue = "This input is not focused!"
               ref = {(firstInp) => {
                  this.firstInput = firstInp;
               }}
            />
            <br></br>
            <br></br>
            <input
               ref = {(secondInput) => {
                  this.secondInput = secondInput;
               }}
               defaultValue = "This is focused input!"
            />
         </div>
      );
   }
}

export default App;

Output

Use the ref and useRef() hooks

As we have discussed above, we can use the ‘ref’ attribute to take a reference of the element. The useRef() is a hook in the functional component, which is replaced by the life cycle methods of the class component.

We can use the useEffect() hook to set focus on the input field when rendering completes.

Syntax

Users can follow the syntax below to use the useRef(), and useEffect() hooks to set focus on input after rendering.

useEffect(() => {
   input.current.focus();
}, []);

In the above syntax, we have passed the callback function as a first parameter which sets focus on the input, and [] as a second parameter which says to set focus only once after rendering the component.

Example

In the example below, first, we used the useRef() to create a ref and stored it in the testRef variable. After that, we assigned the reference of input to the testRef variable using the ‘ref’ attribute.

Next, we used the testRef input variable in the useEffect() hook to set the focus on the input after rendering.

import React, { useState, useRef, useEffect } from "react";

export default function App() {
   const testRef = useRef();
   useEffect(() => {
      testRef.current.focus();
   }, []);

   const [foucsText, setFocusText] = useState("");
   function handleInput(event) {
      let value = event.target.value;
      setFocusText(value);
   }
   return (
      <div className = "App">
         <h2>
            {" "}
            Using the <i> useEffect hooks </i> with an input field to set focus on
            input after rendering.{" "}
         </h2>
         <label for = "name">Enter some text: </label>
         <br></br>
         <input id = "name" ref = {testRef} onInput = {handleInput} value = {foucsText} />
      </div>
   );
}

Output

Shubham Vora

Updated on: 27-Feb-2023

8K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started