The selected attribute for <option> tags are not rendered correctly

This will cause Selenium tests to fail when using getFirstSelectedOption() to find the selected item with the Java API. This seems to affect at least 0.12 and forward. This example should set the selected attribute on the selected option-tag.

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

var App = React.createClass({
    getInitialState: function() {
        return {
            value: "a"
        };
    },
    onChange: function (event) {
        this.setState({value: event.target.value});
    },
    render: function () {
        return <div>
            <select value={this.state.value} onChange={this.onChange}>
                <option value="a">a</option>
                <option value="b">b</option>
            </select>
        </div>;
    }
});

ReactDOM.render(<App/>, document.getElementById("app"));

[gaearon]

Your first example is missing the value attribute on the option. From the documentation, this is the correct usage:

  <select value="B">
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
  </select>

Otherwise React thinks none of them have values, so it can’t match your select’s value to any of the options.

[StJohn3D]

I’m having the same issue. On change will get the correct event information but the select element on the dom still reflects the initial value. Only on the second update (with the same selection - no change) will the select element reflect the true current selection.

The only way I was able to fix this was to use the selected property on <option> elements during my mapping function… <option> selected={opVal === props.selectedVal} key={index}>{opVal}</option>

This of course gets me React warnings saying to use the value prop on <Select> but since that’s not working I’m just living with the warnings.

Please fix this