e.target.value reflects <select value={}> not <option value={}> in Chrome on Windows 10

[felixakiragreen]

Just a note, it works perfectly fine on earlier versions of Windows and Mac OS X

code:

var Test = React.createClass({
  getInitialState: function() {
    return { value: '1' };
  },

  onChange: function(e) {
    this.setState({value: e.target.value})
    console.log(e.target.value)
  },

  render: function() {
    return (
      <div>
        <select value={this.state.value} onChange={this.onChange}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
      </div>
    );
  }
});

Whenever the onChange is triggered, the e.target.value is 1. I'm assuming this is because that is the value starts with. And any changes do not correctly change the value.

[conorhastings]

do you know what version of chrome this is?

[rmdort]

Your onChange handler is wrong

Use this

<select value={this.state.value} onChange={this.handleChange}>

[felixakiragreen]

That was just example code. It works fine on Mac and earlier versions of Windows. Latest version of Chrome.

[univerio]

+1

I'm seeing this as well, but it doesn't reproduce in an isolated jsfiddle for me. Weird.

[univerio]

Some more details. I was able to make the issue reproduce reliably by adding an onClick handler that alters state:

var Test = React.createClass({
  getInitialState: function() {
    return { value: '1' };
  },

  onChange: function(e) {
    this.setState({value: e.target.value});
    console.log(e.target.value);
  },

  onClick: function(e) {
    this.setState({visible: true});
  },

  render: function() {
    return (
      <div>
        <select value={this.state.value} onChange={this.onChange} onClick={this.onClick}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
        </select>
      </div>
    );
  }
});

http://codepen.io/anon/pen/KVdzjR

This reproduces in Chrome 47 on Windows and Linux, but not OS X, nor does it reproduce on Chrome 46 on any platform.

[jmandel]

I can confirm that I see the same behavior on Chrome 47 (on linux). My first selection (when initial value is null) works, and then subsequent selections fail to update the value.

[duoduoin]

I found the same issue in latest Chrome 47. Is there any work around?

[gaearon]

Is this still an issue?

[gaearon]

I’ll assume this was a transient Chrome bug that was later fixed.
If it still occurs please file a new issue.

[zedtux]

I'm facing this issue on Safari 12. I'm receiving the selected option text instead of the selected option value, which is annoying.

I'm using the code from the reactjs documentation.

Update

Actually I had an <option> with a null value. In this case, its text is returned instead of null. Putting a blank string fixed the issue.