Fixes initial option select

facebook · Nov 5, 2015 · da204c9 · da204c9
1 parent 88bae3f
commit da204c9
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 21 deletions.
diff --git a/src/renderers/dom/client/wrappers/ReactDOMOption.js b/src/renderers/dom/client/wrappers/ReactDOMOption.js
@@ -17,6 +17,27 @@ var ReactDOMSelect = require('ReactDOMSelect');
 var assign = require('Object.assign');
 var warning = require('warning');
 
+function flattenChildren(children, needWarning) {
+  var content = '';
+
+  // Flatten children and warn if they aren't strings or numbers;
+  // invalid types are ignored.
+  ReactChildren.forEach(children, function(child) {
+    if (child == null) {
+      return;
+    }
+    if (typeof child === 'string' || typeof child === 'number') {
+      content += child;
+    } else if (needWarning) {
+      warning(
+        false,
+        'Only strings and numbers are supported as <option> children.'
+      );
+    }
+  });
+
+  return content;
+}
 /**
  * Implements an <option> native component that warns when `selected` is set.
  */
@@ -41,17 +62,23 @@ var ReactDOMOption = {
     // or missing (e.g., for <datalist>), we don't change props.selected
     var selected = null;
     if (selectValue != null) {
+      var value;
+      if (props.value != null) {
+        value = props.value + '';
+      } else {
+        value = flattenChildren(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);
       }
     }
 
@@ -67,25 +94,7 @@ var ReactDOMOption = {
       nativeProps.selected = inst._wrapperState.selected;
     }
 
-    var content = '';
-
-    // Flatten children and warn if they aren't strings or numbers;
-    // invalid types are ignored.
-    ReactChildren.forEach(props.children, function(child) {
-      if (child == null) {
-        return;
-      }
-      if (typeof child === 'string' || typeof child === 'number') {
-        content += child;
-      } else {
-        warning(
-          false,
-          'Only strings and numbers are supported as <option> children.'
-        );
-      }
-    });
-
-    nativeProps.children = content;
+    nativeProps.children = flattenChildren(props.children, true);
     return nativeProps;
   },
 

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);
+  });
 });