Merge pull request #6442 from trevorsmith/master

Correctly select options when nested inside an optgroup
facebook · Apr 8, 2016 · 5ac51c3 · 5ac51c3
2 parents 2548108 + f7181e0
commit 5ac51c3
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/src/renderers/dom/client/wrappers/ReactDOMOption.js b/src/renderers/dom/client/wrappers/ReactDOMOption.js
@@ -33,8 +33,16 @@ var ReactDOMOption = {
 
     // Look up whether this option is 'selected'
     var selectValue = null;
-    if (nativeParent != null && nativeParent._tag === 'select') {
-      selectValue = ReactDOMSelect.getSelectValueContext(nativeParent);
+    if (nativeParent != null) {
+      var selectParent = nativeParent;
+
+      if (selectParent._tag === 'optgroup') {
+        selectParent = selectParent._nativeParent;
+      }
+
+      if (selectParent != null && selectParent._tag === 'select') {
+        selectValue = ReactDOMSelect.getSelectValueContext(selectParent);
+      }
     }
 
     // If the value is null (e.g., no specified value or after initial mount)

diff --git a/src/renderers/dom/client/wrappers/__tests__/ReactDOMSelect-test.js b/src/renderers/dom/client/wrappers/__tests__/ReactDOMSelect-test.js
@@ -537,4 +537,21 @@ describe('ReactDOMSelect', function() {
       "Cannot set property 'pendingUpdate' of null"
     );
   });
+
+  it('should select grandchild options nested inside an optgroup', function() {
+    var stub =
+      <select value="b" onChange={noop}>
+        <optgroup label="group">
+          <option value="a">a</option>
+          <option value="b">b</option>
+          <option value="c">c</option>
+        </optgroup>
+      </select>;
+    var container = document.createElement('div');
+    var node = ReactDOM.render(stub, container);
+
+    expect(node.options[0].selected).toBe(false);  // a
+    expect(node.options[1].selected).toBe(true);   // b
+    expect(node.options[2].selected).toBe(false);  // c
+  });
 });