Only assign defaultValue if it has changed.

facebook · Oct 11, 2016 · 2df2023 · 2df2023
1 parent f00fbbd
commit 2df2023
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/src/renderers/dom/client/wrappers/ReactDOMInput.js b/src/renderers/dom/client/wrappers/ReactDOMInput.js
@@ -213,7 +213,11 @@ var ReactDOMInput = {
  }
  } else {
  if (props.value == null && props.defaultValue != null) {
- node.defaultValue = '' + props.defaultValue;
+ // Assigning defaultValue causes side-effects on value, which can cause
+ // unexpected value changes and selections skipping. A quick check avoids this
+ if (node.defaultValue !== '' + props.defaultValue) {
+ node.defaultValue = '' + props.defaultValue;
+ }
  }
  if (props.checked == null && props.defaultChecked != null) {
  node.defaultChecked = !!props.defaultChecked;

diff --git a/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js b/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
@@ -51,6 +51,28 @@ describe('ReactDOMInput', () => {
  expect(node.value).toBe('0');
  });
 
+ it('only assigns defaultValue if it changes', () => {
+ class Test extends React.Component {
+ render() {
+ return (<input defaultValue="0" />);
+ }
+ }
+
+ var component = ReactTestUtils.renderIntoDocument(<Test />);
+ var node = ReactDOM.findDOMNode(component);
+
+ Object.defineProperty(node, 'defaultValue', {
+ get() {
+ return '0';
+ },
+ set(value) {
+ throw new Error(`defaultValue was assigned ${value}, but it did not change!`);
+ },
+ });
+
+ component.forceUpdate();
+ });
+
  it('should display "true" for `defaultValue` of `true`', () => {
  var stub = <input type="text" defaultValue={true} />;
  stub = ReactTestUtils.renderIntoDocument(stub);