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

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

<div class="code-mirror  language-java" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token keyword">import</span> <span class="token class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> from <span class="token string">"react"</span><span class="token punctuation">;</span>

export <span class="token keyword">default</span> function <span class="token class-name">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword">const</span> <span class="token punctuation">[</span>foucsText<span class="token punctuation">,</span> setFocusText<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   function <span class="token function">handleInput</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      let value <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
      <span class="token function">setFocusText</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span>
   <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token operator"><</span>div className <span class="token operator">=</span> <span class="token string">"App"</span><span class="token operator">></span>
         <span class="token generics"><span class="token punctuation"><</span>h2<span class="token punctuation">></span></span>
            <span class="token punctuation">{</span><span class="token string">" "</span><span class="token punctuation">}</span>
            <span class="token class-name">Using</span> the <span class="token generics"><span class="token punctuation"><</span>i<span class="token punctuation">></span></span> autoFocus <span class="token operator"><</span><span class="token operator">/</span>i<span class="token operator">></span> attribute <span class="token keyword">with</span> <span class="token namespace">an</span> input field <span class="token keyword">to</span> <span class="token namespace">set</span> focus on
            input after rendering<span class="token punctuation">.</span> <span class="token punctuation">{</span><span class="token string">" "</span><span class="token punctuation">}</span>
         <span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span>
         <span class="token operator"><</span>label <span class="token keyword">for</span> <span class="token operator">=</span> <span class="token string">"name"</span><span class="token operator">></span> <span class="token class-name">Enter</span> some text<span class="token operator">:</span> <span class="token operator"><</span><span class="token operator">/</span>label<span class="token operator">></span>
         <span class="token generics"><span class="token punctuation"><</span>br<span class="token punctuation">></span></span><span class="token operator"><</span><span class="token operator">/</span>br<span class="token operator">></span>
         <span class="token operator"><</span>input id <span class="token operator">=</span> <span class="token string">"name"</span> autoFocus onInput <span class="token operator">=</span> <span class="token punctuation">{</span>handleInput<span class="token punctuation">}</span> value <span class="token operator">=</span> <span class="token punctuation">{</span>foucsText<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
      <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
   <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</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.

<div class="code-mirror  language-java" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token keyword">import</span> <span class="token class-name">React</span> from <span class="token string">"react"</span><span class="token punctuation">;</span>

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

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.

<div class="code-mirror  language-java" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token keyword">import</span> <span class="token class-name">React</span> from <span class="token string">"react"</span><span class="token punctuation">;</span>

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

export <span class="token keyword">default</span> <span class="token class-name">App</span><span class="token punctuation">;</span>
</div>

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.

<div class="code-mirror  language-java" contenteditable="plaintext-only" spellcheck="false" style="outline: none; overflow-wrap: break-word; overflow-y: auto; white-space: pre-wrap;"><span class="token keyword">import</span> <span class="token class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> useState<span class="token punctuation">,</span> useRef<span class="token punctuation">,</span> useEffect <span class="token punctuation">}</span> from <span class="token string">"react"</span><span class="token punctuation">;</span>

export <span class="token keyword">default</span> function <span class="token class-name">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword">const</span> testRef <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      testRef<span class="token punctuation">.</span>current<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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

Output