Rendering <option value="foo" selected> on the server

Question

React v0.12/v0.13: I’m having an issue with a <select> element that I’d like to have rendered both on the server and in the client (isomorphic). Here’s an example which currently recreates the issue:

const React = require("react");

const SelectedDebug = React.createClass({
  displayName: "SelectedDebug",

  render() {
    return (
      <div>
        <select value="C">
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
        </select>
      </div>
    );
  }
});

module.exports = SelectedDebug;

The selected attribute isn’t rendered on the server, but works fine in the browser.

I've also tried setting the defaultValue prop on the <select> element, which doesn't seem to make a difference. It does work when I use <option value="C" selected>, however, that throws a warning in the console telling me to use either the value or defaultValue prop.

The documentation also describes the desired behavior: https://facebook.github.io/react/docs/forms.html#why-select-value

This code is running in Node v0.12 using babel-core for transpiling.

Is this a bug, or am I missing something?

Update: This is a bug in React. See my comment/link below.

Answer 1

This is a known bug which has been fixed in master, so will presumably be fixed with the release of React 0.14.