🔥 Stop syncing the value attribute on inputs

Author: nhunzaker

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

@@ -271,7 +271,7 @@ describe('ReactDOMInput', () => {
 
       dispatchEventOnNode(node, 'input');
 
-      expect(node.getAttribute('value')).toBe('2.0');
+      expect(node.getAttribute('value')).toBe('2');
       expect(node.value).toBe('2.0');
     });
   });
@@ -667,7 +667,7 @@ describe('ReactDOMInput', () => {
     const node = container.firstChild;
 
     expect(node.value).toBe('0');
-    expect(node.defaultValue).toBe('0');
+    expect(node.defaultValue).toBe('');
   });
 
   it('should properly transition from 0 to an empty value', function() {
@@ -683,7 +683,7 @@ describe('ReactDOMInput', () => {
     const node = container.firstChild;
 
     expect(node.value).toBe('');
-    expect(node.defaultValue).toBe('');
+    expect(node.defaultValue).toBe('0');
   });
 
   it('should properly transition a text input from 0 to an empty 0.0', function() {
@@ -699,7 +699,7 @@ describe('ReactDOMInput', () => {
     const node = container.firstChild;
 
     expect(node.value).toBe('0.0');
-    expect(node.defaultValue).toBe('0.0');
+    expect(node.defaultValue).toBe('0');
   });
 
   it('should properly transition a number input from "" to 0', function() {
@@ -715,7 +715,7 @@ describe('ReactDOMInput', () => {
     const node = container.firstChild;
 
     expect(node.value).toBe('0');
-    expect(node.defaultValue).toBe('0');
+    expect(node.defaultValue).toBe('');
   });
 
   it('should properly transition a number input from "" to "0"', function() {
@@ -731,7 +731,7 @@ describe('ReactDOMInput', () => {
     const node = container.firstChild;
 
     expect(node.value).toBe('0');
-    expect(node.defaultValue).toBe('0');
+    expect(node.defaultValue).toBe('');
   });
 
   it('should have the correct target value', () => {
@@ -1605,15 +1605,15 @@ describe('ReactDOMInput', () => {
       };
     }
 
-    it('always sets the attribute when values change on text inputs', function() {
+    it('retains the initial value attribute when values change on text inputs', function() {
       const Input = getTestInput();
       const stub = ReactDOM.render(<Input type="text" />, container);
       const node = ReactDOM.findDOMNode(stub);
 
       setUntrackedValue.call(node, '2');
       dispatchEventOnNode(node, 'input');
 
-      expect(node.getAttribute('value')).toBe('2');
+      expect(node.getAttribute('value')).toBe('');
     });
 
     it('does not set the value attribute on number inputs if focused', () => {
@@ -1632,21 +1632,6 @@ describe('ReactDOMInput', () => {
       expect(node.getAttribute('value')).toBe('1');
     });
 
-    it('sets the value attribute on number inputs on blur', () => {
-      const Input = getTestInput();
-      const stub = ReactDOM.render(
-        <Input type="number" value="1" />,
-        container,
-      );
-      const node = ReactDOM.findDOMNode(stub);
-
-      setUntrackedValue.call(node, '2');
-      dispatchEventOnNode(node, 'input');
-      dispatchEventOnNode(node, 'blur');
-
-      expect(node.getAttribute('value')).toBe('2');
-    });
-
     it('an uncontrolled number input will not update the value attribute on blur', () => {
       const node = ReactDOM.render(
         <input type="number" defaultValue="1" />,
@@ -1784,7 +1769,7 @@ describe('ReactDOMInput', () => {
       expect(node.getAttribute('value')).toBe('');
     });
 
-    it('treats updated Symbol value as an empty string', function() {
+    it('treats updated Symbol value as initial value', function() {
       ReactDOM.render(<input value="foo" onChange={() => {}} />, container);
       expect(() =>
         ReactDOM.render(
@@ -1795,7 +1780,7 @@ describe('ReactDOMInput', () => {
       const node = container.firstChild;
 
       expect(node.value).toBe('');
-      expect(node.getAttribute('value')).toBe('');
+      expect(node.getAttribute('value')).toBe('foo');
     });
 
     it('treats initial Symbol defaultValue as an empty string', function() {
@@ -1832,7 +1817,7 @@ describe('ReactDOMInput', () => {
       expect(node.getAttribute('value')).toBe('');
     });
 
-    it('treats updated function value as an empty string', function() {
+    it('treats updated function value as initial value', function() {
       ReactDOM.render(<input value="foo" onChange={() => {}} />, container);
       expect(() =>
         ReactDOM.render(
@@ -1843,7 +1828,7 @@ describe('ReactDOMInput', () => {
       const node = container.firstChild;
 
       expect(node.value).toBe('');
-      expect(node.getAttribute('value')).toBe('');
+      expect(node.getAttribute('value')).toBe('foo');
     });
 
     it('treats initial function defaultValue as an empty string', function() {

packages/react-dom/src/client/ReactDOMFiberInput.js

@@ -194,9 +194,7 @@ export function updateWrapper(element: Element, props: Object) {
     return;
   }
 
-  if (props.hasOwnProperty('value')) {
-    setDefaultValue(node, props.type, value);
-  } else if (props.hasOwnProperty('defaultValue')) {
+  if (props.hasOwnProperty('defaultValue')) {
     setDefaultValue(node, props.type, getToStringValue(props.defaultValue));
   }
 
@@ -321,11 +319,7 @@ function updateNamedCousins(rootNode, props) {
 // when the user is inputting text
 //
 // https://github.com/facebook/react/issues/7253
-export function setDefaultValue(
-  node: InputWithWrapperState,
-  type: ?string,
-  value: *,
-) {
+function setDefaultValue(node: InputWithWrapperState, type: ?string, value: *) {
   if (
     // Focused number inputs synchronize on blur. See ChangeEventPlugin.js
     type !== 'number' ||

packages/react-dom/src/events/ChangeEventPlugin.js

@@ -27,7 +27,6 @@ import getEventTarget from './getEventTarget';
 import isEventSupported from './isEventSupported';
 import {getNodeFromInstance} from '../client/ReactDOMComponentTree';
 import * as inputValueTracking from '../client/inputValueTracking';
-import {setDefaultValue} from '../client/ReactDOMFiberInput';
 
 const eventTypes = {
   change: {
@@ -237,9 +236,6 @@ function handleControlledInputBlur(node) {
   if (!state || !state.controlled || node.type !== 'number') {
     return;
   }
-
-  // If controlled, assign the value attribute to the current value on blur
-  setDefaultValue(node, 'number', node.value);
 }
 
 /**