4

I need to clear the selected value of select dropdown as soon as user focus on the select element. I have used the below code but cant figure out what property of select do I need to reset.

<select name="select1" onChange={this.onChangeOption} onFocus={this.handleFocus}>
    <option value=''>Please select...</option>
    <option value='A'>A</option>
    <option value='B'>B</option>
    <option value='C'>C</option>
    <option value='D'>D</option>
</select>

handleFocus(event) {
    event.target.select(); // it did not work!!
}

I want the selected value to be Please select... when the user focuses on the element.

halfer
  • 19,824
  • 17
  • 99
  • 186
Peter
  • 10,492
  • 21
  • 82
  • 132

1 Answers1

9

One of the problems with your select element is that it's neither a controlled or an uncontrolled input element. What you want to achieve can be done with both methods, and it looks like you attempted to make a controlled component.

I'll provide a solution for both:

Clearing a controlled <select> element

You need to turn your select element into a controlled component by assigning it a value which is controlled by the state. Then, make your handleFocus function reset that state variable.

For example:

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {select: ''};
  }
  
  onChangeOption = (event) => {
    this.setState({select: event.target.value});
  }
  
  handleFocus = (event) => {
    this.setState({select: ''});
  }
 
  render() {
    return (
      <select name="select1" value={this.state.select} onChange={this.onChangeOption} onFocus={this.handleFocus}>
        <option value=''>Please select...</option>
        <option value='A'>A</option>
        <option value='B'>B</option>
        <option value='C'>C</option>
        <option value='D'>D</option>
    </select>
    );
  }
}
 
ReactDOM.render(<MyApp />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Clearing an uncontrolled <select> element

If you want to let the DOM manage the select element you could do the following to clear the value whenever the focus event is fired.

class MyApp extends React.Component {
  
  handleFocus = (event) => {
    event.target.value = '';
  }
 
  render() {
    return (
      <select name="select1" onFocus={this.handleFocus}>
        <option value=''>Please select...</option>
        <option value='A'>A</option>
        <option value='B'>B</option>
        <option value='C'>C</option>
        <option value='D'>D</option>
    </select>
    );
  }
}
 
ReactDOM.render(<MyApp />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
Community
  • 1
  • 1
Chris
  • 57,622
  • 19
  • 111
  • 137
  • 1
    thanks for the prompt reply!! However I ran your snippet and noticed that the resEt works inconsistently when you focus after selecting a value. You select 'A' then focus on the dropdown here the reset does not work. you focus again the reset will work! – Peter Sep 19 '17 at 08:07
  • @Manu, for me it works as expected. Remember that the reset function will only happen on the **focus** event. Focus only happens when the element **gets** focused and didn't have it before. In other words, you need to "click away" and unfocus the element and re-focus it. – Chris Sep 19 '17 at 08:11
  • If this isn't the behavior you want, perhaps you want to use `onMouseDown` instead? Here is the exact same snippet as above, but listening on the mouse down event instead: https://jsfiddle.net/877xpvwf/ – Chris Sep 19 '17 at 08:12
  • 1
    I tried onSelect and in handler set event.target.value=''; but it did not work! – Peter Sep 19 '17 at 08:16
  • onMouseDown is what did the trick for me. Just for my knowledge wanted to know if onSelect does not work in React? – Peter Sep 19 '17 at 08:20
  • @Manu, it was my mistake suggesting onSelect. It is only defined for input and textarea elements. – Chris Sep 19 '17 at 08:25