diff --git a/src/dom/components/ReactDOMInput.js b/src/dom/components/ReactDOMInput.js index f957e498cd2..ffce4b50efe 100644 --- a/src/dom/components/ReactDOMInput.js +++ b/src/dom/components/ReactDOMInput.js @@ -50,9 +50,10 @@ var instancesByReactID = {}; var ReactDOMInput = ReactCompositeComponent.createClass({ getInitialState: function() { + var defaultValue = this.props.defaultValue; return { checked: this.props.defaultChecked || false, - value: this.props.defaultValue != null ? this.props.defaultValue : '' + value: defaultValue != null && defaultValue !== false ? defaultValue : '' }; }, @@ -69,9 +70,11 @@ var ReactDOMInput = ReactCompositeComponent.createClass({ props.defaultValue = null; props.checked = this.props.checked != null ? this.props.checked : this.state.checked; - // Cast `this.props.value` to a string so equality checks pass. - props.value = - this.props.value != null ? '' + this.props.value : this.state.value; + + props.value = this.props.value != null && this.props.value !== false + ? '' + this.props.value + : this.state.value; + props.onChange = this._handleChange; return input(props, this.props.children); @@ -102,7 +105,7 @@ var ReactDOMInput = ReactCompositeComponent.createClass({ DOMPropertyOperations.setValueForProperty( rootNode, 'value', - '' + this.props.value || '' + this.props.value !== false ? '' + this.props.value : '' ); } }, diff --git a/src/dom/components/ReactDOMTextarea.js b/src/dom/components/ReactDOMTextarea.js index 78db7120938..fc296d435a7 100644 --- a/src/dom/components/ReactDOMTextarea.js +++ b/src/dom/components/ReactDOMTextarea.js @@ -117,7 +117,7 @@ var ReactDOMTextarea = ReactCompositeComponent.createClass({ DOMPropertyOperations.setValueForProperty( rootNode, 'value', - this.props.value || '' + this.props.value !== false ? '' + this.props.value : '' ); } }, diff --git a/src/dom/components/__tests__/ReactDOMInput-test.js b/src/dom/components/__tests__/ReactDOMInput-test.js index 1b9f7d542f9..d48912c91f7 100644 --- a/src/dom/components/__tests__/ReactDOMInput-test.js +++ b/src/dom/components/__tests__/ReactDOMInput-test.js @@ -45,6 +45,13 @@ describe('ReactDOMInput', function() { expect(node.value).toBe('0'); }); + it('should display "" for `defaultValue` of `false`', function() { + var stub = ; + var node = renderTextInput(stub); + + expect(node.value).toBe(''); + }); + it('should display `value` of number 0', function() { var stub = ; var node = renderTextInput(stub); @@ -52,6 +59,22 @@ describe('ReactDOMInput', function() { expect(node.value).toBe('0'); }); + it('should display "" for `value` of `false`', function() { + var stub = ; + var node = renderTextInput(stub); + + expect(node.value).toBe(''); + }); + + it('should properly control a value of number `0`', function() { + var stub = ; + var node = renderTextInput(stub); + + node.value = 'giraffe'; + ReactTestUtils.Simulate.input(node); + expect(node.value).toBe('0'); + }); + it('should control radio buttons', function() { var RadioGroup = React.createClass({ render: function() { diff --git a/src/dom/components/__tests__/ReactDOMTextarea-test.js b/src/dom/components/__tests__/ReactDOMTextarea-test.js index d4a35014fe1..76f66cdf5ad 100644 --- a/src/dom/components/__tests__/ReactDOMTextarea-test.js +++ b/src/dom/components/__tests__/ReactDOMTextarea-test.js @@ -58,6 +58,13 @@ describe('ReactDOMTextarea', function() { expect(node.value).toBe('0'); }); + it('should display "" for `defaultValue` of `false`', function() { + var stub =