Fixes initial option select

facebook · Nov 2, 2015 · a04eb1d · a04eb1d
1 parent 88bae3f
commit a04eb1d
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 9 deletions.
diff --git a/src/renderers/dom/client/wrappers/ReactDOMOption.js b/src/renderers/dom/client/wrappers/ReactDOMOption.js
@@ -41,31 +41,38 @@ var ReactDOMOption = {
     // or missing (e.g., for <datalist>), we don't change props.selected
     var selected = null;
     if (selectValue != null) {
+      var value;
+      if ('value' in props) {
+        value = props.value + '';
+      } else {
+        // already stringify by getNativeProps
+        value = props.children;
+      }
       selected = false;
       if (Array.isArray(selectValue)) {
         // multiple
         for (var i = 0; i < selectValue.length; i++) {
-          if ('' + selectValue[i] === '' + props.value) {
+          if ('' + selectValue[i] === value) {
             selected = true;
             break;
           }
         }
       } else {
-        selected = ('' + selectValue === '' + props.value);
+        selected = ('' + selectValue === value);
       }
     }
 
     inst._wrapperState = {selected: selected};
-  },
-
-  getNativeProps: function(inst, props) {
-    var nativeProps = assign({selected: undefined, children: undefined}, props);
 
     // Read state only from initial mount because <select> updates value
     // manually; we need the initial state only for server rendering
-    if (inst._wrapperState.selected != null) {
-      nativeProps.selected = inst._wrapperState.selected;
+    if (selected != null) {
+      props.selected = selected;
     }
+  },
+
+  getNativeProps: function(inst, props) {
+    var nativeProps = assign({selected: undefined, children: undefined}, props);
 
     var content = '';
 

diff --git a/src/renderers/dom/client/wrappers/__tests__/ReactDOMOption-test.js b/src/renderers/dom/client/wrappers/__tests__/ReactDOMOption-test.js
@@ -63,4 +63,26 @@ describe('ReactDOMOption', function() {
     expect(console.error.calls.length).toBe(0);
     expect(node.innerHTML).toBe('1  2');
   });
+
+  it('should allow ignoring `value` on option', function() {
+    var a = 'a';
+    var stub =
+      <select value="giraffe" onChange={() => {}}>
+        <option>monkey</option>
+        <option>gir{a}ffe</option>
+        <option>gorill{a}</option>
+      </select>;
+    var options = stub.props.children;
+    var container = document.createElement('div');
+    stub = ReactDOM.render(stub, container);
+    var node = ReactDOM.findDOMNode(stub);
+
+    expect(node.selectedIndex).toBe(1);
+
+    ReactDOM.render(
+      <select value="gorilla">{options}</select>,
+      container
+    );
+    expect(node.selectedIndex).toEqual(2);
+  });
 });
diff --git a/src/renderers/dom/shared/ReactDOMComponent.js b/src/renderers/dom/shared/ReactDOMComponent.js
@@ -585,8 +585,8 @@ ReactDOMComponent.Mixin = {
         transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
         break;
       case 'option':
-        ReactDOMOption.mountWrapper(this, props, nativeParent);
         props = ReactDOMOption.getNativeProps(this, props);
+        ReactDOMOption.mountWrapper(this, props, nativeParent);
         break;
       case 'select':
         ReactDOMSelect.mountWrapper(this, props, nativeParent);