diff --git a/src/renderers/dom/client/wrappers/ReactDOMInput.js b/src/renderers/dom/client/wrappers/ReactDOMInput.js index d4ce97698e3d0..2a83f65ab3448 100644 --- a/src/renderers/dom/client/wrappers/ReactDOMInput.js +++ b/src/renderers/dom/client/wrappers/ReactDOMInput.js @@ -76,7 +76,7 @@ var ReactDOMInput = { }, DisabledInputUtils.getNativeProps(inst, props), { defaultChecked: undefined, defaultValue: undefined, - value: value != null ? value : inst._wrapperState.initialValue, + value: value != null ? value : props.defaultValue, checked: checked != null ? checked : inst._wrapperState.initialChecked, onChange: inst._wrapperState.onChange, }); @@ -147,10 +147,8 @@ var ReactDOMInput = { warnIfValueIsNull(props); } - var defaultValue = props.defaultValue; inst._wrapperState = { initialChecked: props.defaultChecked || false, - initialValue: defaultValue != null ? defaultValue : null, listeners: null, onChange: _handleChange.bind(inst), }; @@ -216,13 +214,16 @@ var ReactDOMInput = { var value = LinkedValueUtils.getValue(props); if (value != null) { + var node = ReactDOMComponentTree.getNodeFromInstance(inst); + // Cast `value` to a string to ensure the value is set correctly. While // browsers typically do this as necessary, jsdom doesn't. - DOMPropertyOperations.setValueForProperty( - ReactDOMComponentTree.getNodeFromInstance(inst), - 'value', - '' + value - ); + var newValue = '' + value; + + // To avoid side effects (such as losing text selection), only set value if changed + if (newValue !== node.value) { + node.value = newValue; + } } }, }; diff --git a/src/renderers/dom/client/wrappers/ReactDOMTextarea.js b/src/renderers/dom/client/wrappers/ReactDOMTextarea.js index 389e019218ae2..55296b1190852 100644 --- a/src/renderers/dom/client/wrappers/ReactDOMTextarea.js +++ b/src/renderers/dom/client/wrappers/ReactDOMTextarea.js @@ -12,7 +12,6 @@ 'use strict'; var DisabledInputUtils = require('DisabledInputUtils'); -var DOMPropertyOperations = require('DOMPropertyOperations'); var LinkedValueUtils = require('LinkedValueUtils'); var ReactDOMComponentTree = require('ReactDOMComponentTree'); var ReactUpdates = require('ReactUpdates'); @@ -66,12 +65,46 @@ var ReactDOMTextarea = { '`dangerouslySetInnerHTML` does not make sense on , container); + + expect(node.value).toBe('1'); + }); + + it('should not incur unnecessary DOM mutations', function() { + var container = document.createElement('div'); + ReactDOM.render(; - stub = renderTextarea(stub, container); - var node = ReactDOM.findDOMNode(stub); + var node = renderTextarea(stub, container, true); expect(console.error.argsForCall.length).toBe(1); expect(node.value).toBe('giraffe'); - // Changing children should do nothing, it functions like `defaultValue`. + // Changing children should cause value to change (new behavior of `defaultValue`) stub = ReactDOM.render(, container); - expect(node.value).toEqual('giraffe'); + expect(node.value).toEqual('gorilla'); + }); + + it('should not keep value when switching to uncontrolled element if not changed', function() { + var container = document.createElement('div'); + + var node = renderTextarea(, container); + + expect(node.value).toEqual('gorilla'); + }); + + it('should keep value when switching to uncontrolled element if changed', function() { + var container = document.createElement('div'); + + var node = renderTextarea(, container); + + expect(node.value).toBe('puppies'); + + ReactDOM.render(, container); + + expect(node.value).toEqual('puppies'); }); it('should allow numbers as children', function() { spyOn(console, 'error'); - var node = ReactDOM.findDOMNode(renderTextarea()); + var node = renderTextarea(); expect(console.error.argsForCall.length).toBe(1); expect(node.value).toBe('17'); }); it('should allow booleans as children', function() { spyOn(console, 'error'); - var node = ReactDOM.findDOMNode(renderTextarea()); + var node = renderTextarea(); expect(console.error.argsForCall.length).toBe(1); expect(node.value).toBe('false'); }); @@ -210,7 +282,7 @@ describe('ReactDOMTextarea', function() { return 'sharkswithlasers'; }, }; - var node = ReactDOM.findDOMNode(renderTextarea()); + var node = renderTextarea(); expect(console.error.argsForCall.length).toBe(1); expect(node.value).toBe('sharkswithlasers'); }); @@ -228,7 +300,7 @@ describe('ReactDOMTextarea', function() { var node; expect(function() { - node = ReactDOM.findDOMNode(renderTextarea()); + node = renderTextarea(); }).not.toThrow(); expect(node.value).toBe('[object Object]'); @@ -248,12 +320,12 @@ describe('ReactDOMTextarea', function() { ); - expect(ReactDOM.findDOMNode(instance).value).toBe('yolo'); + expect(instance.value).toBe('yolo'); expect(link.value).toBe('yolo'); expect(link.requestChange.mock.calls.length).toBe(0); - ReactDOM.findDOMNode(instance).value = 'test'; - ReactTestUtils.Simulate.change(ReactDOM.findDOMNode(instance)); + instance.value = 'test'; + ReactTestUtils.Simulate.change(instance); expect(link.requestChange.mock.calls.length).toBe(1); expect(link.requestChange.mock.calls[0][0]).toEqual('test'); @@ -297,4 +369,5 @@ describe('ReactDOMTextarea', function() { ); expect(console.error.argsForCall.length).toBe(1); }); + }); diff --git a/src/renderers/dom/shared/HTMLDOMPropertyConfig.js b/src/renderers/dom/shared/HTMLDOMPropertyConfig.js index ce5e93cea6e1a..60f87e2586238 100644 --- a/src/renderers/dom/shared/HTMLDOMPropertyConfig.js +++ b/src/renderers/dom/shared/HTMLDOMPropertyConfig.js @@ -15,7 +15,6 @@ var DOMProperty = require('DOMProperty'); var MUST_USE_PROPERTY = DOMProperty.injection.MUST_USE_PROPERTY; var HAS_BOOLEAN_VALUE = DOMProperty.injection.HAS_BOOLEAN_VALUE; -var HAS_SIDE_EFFECTS = DOMProperty.injection.HAS_SIDE_EFFECTS; var HAS_NUMERIC_VALUE = DOMProperty.injection.HAS_NUMERIC_VALUE; var HAS_POSITIVE_NUMERIC_VALUE = DOMProperty.injection.HAS_POSITIVE_NUMERIC_VALUE; @@ -62,6 +61,7 @@ var HTMLDOMPropertyConfig = { data: 0, // For `` acts as `src`. dateTime: 0, default: HAS_BOOLEAN_VALUE, + defaultValue: MUST_USE_PROPERTY, defer: HAS_BOOLEAN_VALUE, dir: 0, disabled: HAS_BOOLEAN_VALUE, @@ -153,7 +153,7 @@ var HTMLDOMPropertyConfig = { // Setting .type throws on non- tags type: 0, useMap: 0, - value: MUST_USE_PROPERTY | HAS_SIDE_EFFECTS, + value: 0, width: 0, wmode: 0, wrap: 0, diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js index dc0c53690e119..9f80bc80a6c80 100644 --- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js +++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js @@ -489,30 +489,32 @@ describe('ReactDOMComponent', function() { ReactDOM.render(
, container); var node = container.firstChild; - var nodeValue = ''; // node.value always returns undefined - var nodeValueSetter = jest.fn(); - Object.defineProperty(node, 'value', { - get: function() { - return nodeValue; - }, - set: nodeValueSetter.mockImplementation(function(newValue) { - nodeValue = newValue; - }), - }); - function renderWithValueAndExpect(value, expected) { - ReactDOM.render(
, container); - expect(nodeValueSetter.mock.calls.length).toBe(expected); - } + var nodeValueSetter = jest.genMockFn(); + + var oldSetAttribute = node.setAttribute.bind(node); + node.setAttribute = function(key, value) { + oldSetAttribute(key, value); + nodeValueSetter(key, value); + }; + + ReactDOM.render(
, container); + expect(nodeValueSetter.mock.calls.length).toBe(1); - renderWithValueAndExpect(undefined, 0); - renderWithValueAndExpect('', 0); - renderWithValueAndExpect('foo', 1); - renderWithValueAndExpect('foo', 1); - renderWithValueAndExpect(undefined, 2); - renderWithValueAndExpect(null, 2); - renderWithValueAndExpect('', 2); - renderWithValueAndExpect(undefined, 2); + ReactDOM.render(
, container); + expect(nodeValueSetter.mock.calls.length).toBe(1); + + ReactDOM.render(
, container); + expect(nodeValueSetter.mock.calls.length).toBe(1); + + ReactDOM.render(
, container); + expect(nodeValueSetter.mock.calls.length).toBe(1); + + ReactDOM.render(
, container); + expect(nodeValueSetter.mock.calls.length).toBe(2); + + ReactDOM.render(
, container); + expect(nodeValueSetter.mock.calls.length).toBe(2); }); it('should not incur unnecessary DOM mutations for boolean properties', function() {