How to focus on html select on page load or button click in react js?

Question

I'm creating a react js application, and using HTML select dropdown. I want to focus on select when page load. below shows which code I'm using in select.

<select id="sel_bookID" autofocus> 
  <option value="binary"> 
    Binary Search 
  </option> 
  <option value="linear"> 
    Linear Search 
  </option> 
  <option value="interpolation"> 
    Interpolation Search 
  </option> 
</select>

I'm also using below mention some StackOverflow solution but did not work.

//jquery
$(document).ready(function(){
    $('#sel_bookID').focus();
});

or

//javascript
document.addEventListener('DOMContentLoaded', function(){ 
    document.getElementById('sel_bookID').focus();
}, false);

you need to use `focus` in `componentDidMount`, you have tried is javascript and jquery way. — Devsi Odedra, Dec 09 '19 at 10:55
sorry , my mistake .i'm not add id property, but also add id it's not working. — sonu shaikh, Dec 09 '19 at 11:02

Sarvesh Mahajan · Answer 1 · 2019-12-09T11:24:10.193

0

This line:

<select autofocus>

should have an id attribute, like so:

<select autofocus id="selectElem">

JS:

window.onload = function () {
    document.getElementById('selectElem').focus();
};

edited Dec 09 '19 at 11:24

answered Dec 09 '19 at 11:00

Sarvesh Mahajan

914
7
16

not working sir, sorry my mistake before post not properly check. but id also added not working . – sonu shaikh Dec 09 '19 at 11:12
window.onload also using but not working .this is existing solutions available on stackoverflow. – sonu shaikh Dec 09 '19 at 11:32
That should work, well can you add complete code, including react.js implementation – Sarvesh Mahajan Dec 09 '19 at 11:40

score 0 · Answer 2 · answered Dec 09 '19 at 11:00

0

You need to add an id attribute to your select tag like this:

<select autofocus id="sel_bookID"> 
  <option value="binary"> 
    Binary Search 
  </option> 
  <option value="linear"> 
    Linear Search 
  </option> 
  <option value="interpolation"> 
    Interpolation Search 
  </option> 
</select>

otherwise, your js script cannot find an element with id sel_bookID and returns undefined

answered Dec 09 '19 at 11:00

Puupuls

76
12

1

not working in react js. this one i had tried. – sonu shaikh Dec 09 '19 at 11:03

Viktor Zagoruyko · Answer 3 · 2019-12-09T11:11:52.500

0

This is react way using refs:

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    this.myRef.current.focus();
  }

  render() {
    return (
      <div className="App">
        <select ref={this.myRef}>
          <option value="react">React</option>
          <option value="vue">Vue</option>
          <option value="angular">Angular</option>
        </select>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Refs and the DOM

CodeSandBox Example

If you prefer autofocus option you have to use autoFocus to make it work

edited Dec 09 '19 at 11:11

answered Dec 09 '19 at 11:01

Viktor Zagoruyko

179
9

errors comes in console "l.a.createRef is not a function". – sonu shaikh Dec 09 '19 at 11:10
I have no idea what `l.a.createRef` means, as you can see there are no errors in example. As I said the easiest way for you will be using `autoFocus` prop. – Viktor Zagoruyko Dec 09 '19 at 11:14
Code Sandbox example also not working. – sonu shaikh Dec 09 '19 at 11:15
i don't no why autofocus not working in react js when html select using.bcoz no.of solution availbale in stackoverflow i had already tried,after that i put in stackoverflow – sonu shaikh Dec 09 '19 at 11:16
Did you click refresh in codesandbox browser(iframe)? – Viktor Zagoruyko Dec 09 '19 at 11:22
yes refresh, but not working.this issue taken my entire day. – sonu shaikh Dec 09 '19 at 11:25

How to focus on html select on page load or button click in react js?

3 Answers3