Update value tracking on cousin radios (#11028)

* fix radio updates * Format fixtures and ReactDOMFiberInput
facebook · Nov 16, 2017 · e0e9131 · e0e9131
1 parent 9b36df8
commit e0e9131
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 7 deletions.
diff --git a/fixtures/dom/src/components/fixtures/input-change-events/RadioGroupFixture.js b/fixtures/dom/src/components/fixtures/input-change-events/RadioGroupFixture.js
@@ -26,7 +26,7 @@ class RadioGroupFixture extends React.Component {
 
   render() {
     const {changeCount} = this.state;
-    const color = changeCount === 2 ? 'green' : 'red';
+    const color = changeCount >= 3 ? 'green' : 'red';
 
     return (
       <Fixture>

diff --git a/fixtures/dom/src/components/fixtures/input-change-events/index.js b/fixtures/dom/src/components/fixtures/input-change-events/index.js
@@ -57,10 +57,12 @@ class InputChangeEvents extends React.Component {
           <TestCase.Steps>
             <li>Click on the "Radio 2"</li>
             <li>Click back to "Radio 1"</li>
+            <li>Click back to "Radio 2"</li>
           </TestCase.Steps>
 
           <TestCase.ExpectedResult>
-            The <code>onChange</code> call count should equal 2
+            The <code>onChange</code> call count increment on each value change
+            (at least 3+)
           </TestCase.ExpectedResult>
 
           <RadioGroupFixture />

diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js
@@ -782,10 +782,6 @@ export function updateProperties(
       // happen after `updateDOMProperties`. Otherwise HTML5 input validations
       // raise warnings and prevent the new value from being assigned.
       ReactDOMFiberInput.updateWrapper(domElement, nextRawProps);
-
-      // We also check that we haven't missed a value update, such as a
-      // Radio group shifting the checked value to another named radio input.
-      inputValueTracking.updateValueIfChanged((domElement: any));
       break;
     case 'textarea':
       ReactDOMFiberTextarea.updateWrapper(domElement, nextRawProps);

diff --git a/packages/react-dom/src/client/ReactDOMFiberInput.js b/packages/react-dom/src/client/ReactDOMFiberInput.js
@@ -15,6 +15,7 @@ import warning from 'fbjs/lib/warning';
 import * as DOMPropertyOperations from './DOMPropertyOperations';
 import {getFiberCurrentPropsFromNode} from './ReactDOMComponentTree';
 import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';
+import * as inputValueTracking from './inputValueTracking';
 
 type InputWithWrapperState = HTMLInputElement & {
   _wrapperState: {
@@ -320,6 +321,11 @@ function updateNamedCousins(rootNode, props) {
         'ReactDOMInput: Mixing React and non-React radio inputs with the ' +
           'same `name` is not supported.',
       );
+
+      // We need update the tracked value on the named cousin since the value
+      // was changed but the input saw no event or value set
+      inputValueTracking.updateValueIfChanged(otherNode);
+
       // If this is a controlled radio button group, forcing the input that
       // was previously checked to update will cause it to be come re-checked
       // as appropriate.

diff --git a/packages/react-dom/src/client/inputValueTracking.js b/packages/react-dom/src/client/inputValueTracking.js
@@ -12,7 +12,7 @@ type ValueTracker = {
   setValue(value: string): void,
   stopTracking(): void,
 };
-type WrapperState = {_valueTracker: ?ValueTracker};
+type WrapperState = {_valueTracker?: ?ValueTracker};
 type ElementWithValueTracker = HTMLInputElement & WrapperState;
 
 function isCheckable(elem: HTMLInputElement) {