diff --git a/src/browser/ui/dom/components/ReactDOMSelect.js b/src/browser/ui/dom/components/ReactDOMSelect.js index 0b071400b5e23..051a9759d681f 100644 --- a/src/browser/ui/dom/components/ReactDOMSelect.js +++ b/src/browser/ui/dom/components/ReactDOMSelect.js @@ -22,11 +22,14 @@ var assign = require('Object.assign'); var select = ReactElement.createFactory('select'); -function updateWithPendingValueIfMounted() { +function updateOptionsIfPendingUpdateAndMounted() { /*jshint validthis:true */ - if (this.isMounted()) { - this.setState({value: this._pendingValue}); - this._pendingValue = 0; + if (this._pendingUpdate) { + this._pendingUpdate = false; + var value = LinkedValueUtils.getValue(this); + if (value != null && this.isMounted()) { + updateOptions(this, value); + } } } @@ -56,40 +59,43 @@ function selectValueType(props, propName, componentName) { } /** - * If `value` is supplied, updates , + , + + ] + }) + + var node = stub.getDOMNode() + + expect(node.options[0].selected).toBe(true); // a + expect(node.options[1].selected).toBe(true); // b + expect(node.options[2].selected).toBe(false); // c + }); + it('should allow setting `value` with `objectToString`', function() { var objectToString = { animal: "giraffe", @@ -181,12 +202,12 @@ describe('ReactDOMSelect', function() { expect(node.options[1].selected).toBe(true); // giraffe expect(node.options[2].selected).toBe(false); // gorilla - // When making it multiple, giraffe should still be selected - stub.setProps({multiple: true, defaultValue: null}); + // When making it multiple, giraffe and gorilla should be selected + stub.setProps({multiple: true, defaultValue: ['giraffe', 'gorilla']}); expect(node.options[0].selected).toBe(false); // monkey expect(node.options[1].selected).toBe(true); // giraffe - expect(node.options[2].selected).toBe(false); // gorilla + expect(node.options[2].selected).toBe(true); // gorilla }); it('should allow switching from multiple', function() { @@ -203,13 +224,57 @@ describe('ReactDOMSelect', function() { expect(node.options[1].selected).toBe(true); // giraffe expect(node.options[2].selected).toBe(true); // gorilla - // When removing multiple, giraffe should still be selected (but gorilla - // will no longer be) - stub.setProps({multiple: false, defaultValue: null}); + // When removing multiple, defaultValue is applied again, being omitted + // means that "monkey" will be selected + stub.setProps({multiple: false, defaultValue: 'gorilla'}); + + expect(node.options[0].selected).toBe(false); // monkey + expect(node.options[1].selected).toBe(false); // giraffe + expect(node.options[2].selected).toBe(true); // gorilla + }); + + it('should remember value when switching to uncontrolled', function() { + var stub = + ; + stub = ReactTestUtils.renderIntoDocument(stub); + var node = stub.getDOMNode(); expect(node.options[0].selected).toBe(false); // monkey expect(node.options[1].selected).toBe(true); // giraffe expect(node.options[2].selected).toBe(false); // gorilla + + stub.setProps({value: null}); + + expect(node.options[0].selected).toBe(false); // monkey + expect(node.options[1].selected).toBe(true); // giraffe + expect(node.options[2].selected).toBe(false); // gorilla + }); + + it('should remember updated value when switching to uncontrolled', function() { + var stub = + ; + stub = ReactTestUtils.renderIntoDocument(stub); + var node = stub.getDOMNode(); + + stub.setProps({value: 'gorilla'}); + + expect(node.options[0].selected).toBe(false); // monkey + expect(node.options[1].selected).toBe(false); // giraffe + expect(node.options[2].selected).toBe(true); // gorilla + + stub.setProps({value: null}); + + expect(node.options[0].selected).toBe(false); // monkey + expect(node.options[1].selected).toBe(false); // giraffe + expect(node.options[2].selected).toBe(true); // gorilla }); it('should support ReactLink', function() {