0

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);
Improve this question
2
  • you need to use focus in componentDidMount, you have tried is javascript and jquery way. Commented Dec 9, 2019 at 10:55
  • 1
    sorry , my mistake .i'm not add id property, but also add id it's not working. Commented Dec 9, 2019 at 11:02

3 Answers 3

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

not working in react js. this one i had tried.
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

Improve this answer

6 Comments

errors comes in console "l.a.createRef is not a function".
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.
Code Sandbox example also not working.
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
Did you click refresh in codesandbox browser(iframe)?
|
0

This line:

<select autofocus>

should have an id attribute, like so:

<select autofocus id="selectElem">

JS:

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

3 Comments

not working sir, sorry my mistake before post not properly check. but id also added not working .
window.onload also using but not working .this is existing solutions available on stackoverflow.
That should work, well can you add complete code, including react.js implementation

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.