Correctly select options when nested inside an optgroup
Trevor Smith committed
Apr 7, 2016 at 16:30 UTC
b102e256634ce7973eee6695e9aa8cb46ad14e42
2 files changed
+28
-2
src/renderers/dom/client/wrappers/ReactDOMOption.js
+10
-2
@@ -32,8 +32,16 @@ var ReactDOMOption = {
32
33
// Look up whether this option is 'selected'
34
var selectValue = null;
35
- if (nativeParent != null && nativeParent._tag === 'select') {
36
- selectValue = ReactDOMSelect.getSelectValueContext(nativeParent);
35
+ if (nativeParent != null) {
36
+ var selectParent = nativeParent;
37
+
38
+ if (selectParent._tag === 'optgroup') {
39
+ selectParent = selectParent._nativeParent;
40
+ }
41
+
42
+ if (selectParent._tag === 'select') {
43
+ selectValue = ReactDOMSelect.getSelectValueContext(selectParent);
44
+ }
45
}
46
47
// If the value is null (e.g., no specified value or after initial mount)
src/renderers/dom/client/wrappers/__tests__/ReactDOMSelect-test.js
+18
@@ -537,4 +537,22 @@ describe('ReactDOMSelect', function() {
537
"Cannot set property 'pendingUpdate' of null"
538
);
539
});
540
+
541
+ it('should select grandchild options nested inside an optgroup', function() {
542
+ var stub =
543
+ <select value="b" onChange={noop}>
544
+ <optgroup label="group">
545
+ <option value="a">a</option>
546
+ <option value="b">b</option>
547
+ <option value="c">c</option>
548
+ </optgroup>
549
+ </select>;
550
+ var container = document.createElement('div');
551
+ stub = ReactDOM.render(stub, container);
552
+ var node = ReactDOM.findDOMNode(stub);
553
+
554
+ expect(node.options[0].selected).toBe(false); // a
555
+ expect(node.options[1].selected).toBe(true); // b
556
+ expect(node.options[2].selected).toBe(false); // c
557
+ });
558
});