How to reamove focus from a select in React

How to remove focus from select in react(Javascript)

by

To remove focus from a select you need to use the built-in method called “blur()”.
Let’s understand with an example:-

Example:-

Let’s assume we have a select component with the id “cars” and name “cars” and we want to remove focus whenever we choose an option from the select.

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

To remove focus from the select, we need to first use the “document.getElementById()” function and provide it with the unique “id” attribute value of the select. Then, we can use the “blur()” method to remove the focus from the selected element. In simpler terms, we can use a combination of JavaScript functions to remove the focus from select.

This is how you will use blur():

document.getElementById("cars").blur();

You should use this code inside the “onChange()” event of the dropdown list. This code will help to remove the focus or selection from the dropdown list when the user selects a new option.

Leave a Comment