🔥 Stop syncing the value attribute on inputs (behind a feature flag) (#13526)

* 🔥 Stop syncing the value attribute on inputs

* Eliminate some additional checks

* Remove initialValue and initialWrapper from wrapperState flow type

* Update tests with new sync logic, reduce some operations

* Update tests, add some caveats for SSR mismatches

* Revert newline change

* Remove unused type

* Call toString to safely type string values

* Add disableInputAttributeSyncing feature flag

Reverts tests to original state, adds attribute sync feature flag,
then moves all affected tests to ReactFire-test.js.

* Revert position of types in toStringValues

* Invert flag on number input blur

* Add clarification why double blur is necessary

* Update ReactFire number cases to be more explicite about blur

* Move comments to reduce diff size

* Add comments to clarify behavior in each branch

* There is no need to assign a different checked behavior in Fire

* Use checked reference

* Format

* Avoid precomputing stringable values

* Revert getToStringValue comment

* Revert placement of undefined in getToStringValue

* Do not eagerly stringify value

* Unify Fire test cases with normal ones

* Revert toString change. Only assign unsynced values when not nully

Author: nhunzaker

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

@@ -9,6 +9,9 @@
 
 'use strict';
 
+// Set by `yarn test-fire`.
+const {disableInputAttributeSyncing} = require('shared/ReactFeatureFlags');
+
 describe('DOMPropertyOperations', () => {
   let React;
   let ReactDOM;
@@ -80,7 +83,11 @@ describe('DOMPropertyOperations', () => {
     it('should not remove empty attributes for special input properties', () => {
       const container = document.createElement('div');
       ReactDOM.render(<input value="" onChange={() => {}} />, container);
-      expect(container.firstChild.getAttribute('value')).toBe('');
+      if (disableInputAttributeSyncing) {
+        expect(container.firstChild.hasAttribute('value')).toBe(false);
+      } else {
+        expect(container.firstChild.getAttribute('value')).toBe('');
+      }
       expect(container.firstChild.value).toBe('');
     });
 
@@ -165,7 +172,11 @@ describe('DOMPropertyOperations', () => {
         <input type="text" value="foo" onChange={function() {}} />,
         container,
       );
-      expect(container.firstChild.getAttribute('value')).toBe('foo');
+      if (disableInputAttributeSyncing) {
+        expect(container.firstChild.hasAttribute('value')).toBe(false);
+      } else {
+        expect(container.firstChild.getAttribute('value')).toBe('foo');
+      }
       expect(container.firstChild.value).toBe('foo');
       expect(() =>
         ReactDOM.render(
@@ -175,7 +186,11 @@ describe('DOMPropertyOperations', () => {
       ).toWarnDev(
         'A component is changing a controlled input of type text to be uncontrolled',
       );
-      expect(container.firstChild.getAttribute('value')).toBe('foo');
+      if (disableInputAttributeSyncing) {
+        expect(container.firstChild.hasAttribute('value')).toBe(false);
+      } else {
+        expect(container.firstChild.getAttribute('value')).toBe('foo');
+      }
       expect(container.firstChild.value).toBe('foo');
     });