Fix input tracking bug (#26627)

In
2019ddc,
we changed to set .defaultValue before .value on updates. In some cases,
setting .defaultValue causes .value to change, and since we only set
.value if it has the wrong value, this resulted in us not assigning to
.value, which resulted in inputValueTracking not knowing the right
value. See new test added.

My fix here is to (a) move the value setting back up first and (b)
narrowing the fix in the aforementioned PR to newly remove the value
attribute only if it defaultValue was previously present in props.

The second half is necessary because for types where the value property
and attribute are indelibly linked (hidden checkbox radio submit image
reset button, i.e. spec modes default or default/on from
https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default),
we can't remove the value attribute after setting .value, because that
will undo the assignment we just did! That is, not having (b) makes all
of those types fail to handle updating props.value.

This code is incredibly hard to think about but I think this is right
(or at least, as right as the old code was) because we set .value here
only if the nextProps.value != null, and we now remove defaultValue only
if lastProps.defaultValue != null. These can't happen at the same time
because we have long warned if value and defaultValue are simultaneously
specified, and also if a component switches between controlled and
uncontrolled.

Also, it fixes the test in #26626.

packages/react-dom-bindings/src/client/ReactDOMComponent.js

@@ -1297,32 +1297,36 @@ export function updateProperties(
       let type = null;
       let value = null;
       let defaultValue = null;
+      let lastDefaultValue = null;
       let checked = null;
       let defaultChecked = null;
       for (const propKey in lastProps) {
         const lastProp = lastProps[propKey];
-        if (
-          lastProps.hasOwnProperty(propKey) &&
-          lastProp != null &&
-          !nextProps.hasOwnProperty(propKey)
-        ) {
+        if (lastProps.hasOwnProperty(propKey) && lastProp != null) {
           switch (propKey) {
             case 'checked': {
-              const checkedValue = nextProps.defaultChecked;
-              const inputElement: HTMLInputElement = (domElement: any);
-              inputElement.checked =
-                !!checkedValue &&
-                typeof checkedValue !== 'function' &&
-                checkedValue !== 'symbol';
+              if (!nextProps.hasOwnProperty(propKey)) {
+                const checkedValue = nextProps.defaultChecked;
+                const inputElement: HTMLInputElement = (domElement: any);
+                inputElement.checked =
+                  !!checkedValue &&
+                  typeof checkedValue !== 'function' &&
+                  checkedValue !== 'symbol';
+              }
               break;
             }
             case 'value': {
               // This is handled by updateWrapper below.
               break;
             }
+            case 'defaultValue': {
+              lastDefaultValue = lastProp;
+            }
             // defaultChecked and defaultValue are ignored by setProp
+            // Fallthrough
             default: {
-              setProp(domElement, tag, propKey, null, nextProps, lastProp);
+              if (!nextProps.hasOwnProperty(propKey))
+                setProp(domElement, tag, propKey, null, nextProps, lastProp);
             }
           }
         }
@@ -1473,6 +1477,7 @@ export function updateProperties(
         domElement,
         value,
         defaultValue,
+        lastDefaultValue,
         checked,
         defaultChecked,
         type,
@@ -1809,6 +1814,7 @@ export function updatePropertiesWithDiff(
       const type = nextProps.type;
       const value = nextProps.value;
       const defaultValue = nextProps.defaultValue;
+      const lastDefaultValue = lastProps.defaultValue;
       const checked = nextProps.checked;
       const defaultChecked = nextProps.defaultChecked;
       for (let i = 0; i < updatePayload.length; i += 2) {
@@ -1934,6 +1940,7 @@ export function updatePropertiesWithDiff(
         domElement,
         value,
         defaultValue,
+        lastDefaultValue,
         checked,
         defaultChecked,
         type,

packages/react-dom-bindings/src/client/ReactDOMInput.js

@@ -85,19 +85,41 @@ export function updateInput(
   element: Element,
   value: ?string,
   defaultValue: ?string,
+  lastDefaultValue: ?string,
   checked: ?boolean,
   defaultChecked: ?boolean,
   type: ?string,
 ) {
   const node: HTMLInputElement = (element: any);
 
+  if (value != null) {
+    if (type === 'number') {
+      if (
+        // $FlowFixMe[incompatible-type]
+        (value === 0 && node.value === '') ||
+        // We explicitly want to coerce to number here if possible.
+        // eslint-disable-next-line
+        node.value != (value: any)
+      ) {
+        node.value = toString(getToStringValue(value));
+      }
+    } else if (node.value !== toString(getToStringValue(value))) {
+      node.value = toString(getToStringValue(value));
+    }
+  } else if (type === 'submit' || type === 'reset') {
+    // Submit/reset inputs need the attribute removed completely to avoid
+    // blank-text buttons.
+    node.removeAttribute('value');
+    return;
+  }
+
   if (disableInputAttributeSyncing) {
     // When not syncing the value attribute, React only assigns a new value
     // whenever the defaultValue React prop has changed. When not present,
     // React does nothing
     if (defaultValue != null) {
       setDefaultValue(node, type, getToStringValue(defaultValue));
-    } else {
+    } else if (lastDefaultValue != null) {
       node.removeAttribute('value');
     }
   } else {
@@ -110,7 +132,7 @@ export function updateInput(
       setDefaultValue(node, type, getToStringValue(value));
     } else if (defaultValue != null) {
       setDefaultValue(node, type, getToStringValue(defaultValue));
-    } else {
+    } else if (lastDefaultValue != null) {
       node.removeAttribute('value');
     }
   }
@@ -135,27 +157,6 @@ export function updateInput(
   if (checked != null && node.checked !== !!checked) {
     node.checked = checked;
   }
-
-  if (value != null) {
-    if (type === 'number') {
-      if (
-        // $FlowFixMe[incompatible-type]
-        (value === 0 && node.value === '') ||
-        // We explicitly want to coerce to number here if possible.
-        // eslint-disable-next-line
-        node.value != (value: any)
-      ) {
-        node.value = toString(getToStringValue(value));
-      }
-    } else if (node.value !== toString(getToStringValue(value))) {
-      node.value = toString(getToStringValue(value));
-    }
-  } else if (type === 'submit' || type === 'reset') {
-    // Submit/reset inputs need the attribute removed completely to avoid
-    // blank-text buttons.
-    node.removeAttribute('value');
-    return;
-  }
 }
 
 export function initInput(
@@ -286,6 +287,7 @@ export function restoreControlledInputState(element: Element, props: Object) {
     rootNode,
     props.value,
     props.defaultValue,
+    props.defaultValue,
     props.checked,
     props.defaultChecked,
     props.type,
@@ -341,6 +343,7 @@ export function restoreControlledInputState(element: Element, props: Object) {
         otherNode,
         otherProps.value,
         otherProps.defaultValue,
+        otherProps.defaultValue,
         otherProps.checked,
         otherProps.defaultChecked,
         otherProps.type,

packages/react-dom/src/__tests__/DOMPropertyOperations-test.js

@@ -1166,7 +1166,11 @@ describe('DOMPropertyOperations', () => {
       ).toErrorDev(
         'A component is changing a controlled input to be uncontrolled',
       );
-      expect(container.firstChild.hasAttribute('value')).toBe(false);
+      if (disableInputAttributeSyncing) {
+        expect(container.firstChild.hasAttribute('value')).toBe(false);
+      } else {
+        expect(container.firstChild.getAttribute('value')).toBe('foo');
+      }
       expect(container.firstChild.value).toBe('foo');
     });
 

packages/react-dom/src/__tests__/ReactDOMInput-test.js

@@ -1952,7 +1952,11 @@ describe('ReactDOMInput', () => {
       expect(renderInputWithStringThenWithUndefined).toErrorDev(
         'A component is changing a controlled input to be uncontrolled.',
       );
-      expect(input.getAttribute('value')).toBe(null);
+      if (disableInputAttributeSyncing) {
+        expect(input.getAttribute('value')).toBe(null);
+      } else {
+        expect(input.getAttribute('value')).toBe('latest');
+      }
     });
 
     it('preserves the value property', () => {
@@ -1998,7 +2002,11 @@ describe('ReactDOMInput', () => {
           'or `undefined` for uncontrolled components.',
         'A component is changing a controlled input to be uncontrolled.',
       ]);
-      expect(input.hasAttribute('value')).toBe(false);
+      if (disableInputAttributeSyncing) {
+        expect(input.getAttribute('value')).toBe(null);
+      } else {
+        expect(input.getAttribute('value')).toBe('latest');
+      }
     });
 
     it('preserves the value property', () => {
@@ -2183,4 +2191,26 @@ describe('ReactDOMInput', () => {
     ReactDOM.render(<input type="text" defaultValue={null} />, container);
     expect(node.defaultValue).toBe('');
   });
+
+  it('should notice input changes when reverting back to original value', () => {
+    const log = [];
+    function onChange(e) {
+      log.push(e.target.value);
+    }
+    ReactDOM.render(
+      <input type="text" value="" onChange={onChange} />,
+      container,
+    );
+    ReactDOM.render(
+      <input type="text" value="a" onChange={onChange} />,
+      container,
+    );
+
+    const node = container.firstChild;
+    setUntrackedValue.call(node, '');
+    dispatchEventOnNode(node, 'input');
+
+    expect(log).toEqual(['']);
+    expect(node.value).toBe('a');
+  });
 });