Update value tracking on cousin radios (#11028)
* fix radio updates * Format fixtures and ReactDOMFiberInput
Jason Quense committed
Nov 16, 2017 at 09:08 UTC
e0e91310400b616e370c38469b401f968de61966
5 files changed
+11
-7
fixtures/dom/src/components/fixtures/input-change-events/RadioGroupFixture.js
+1
-1
@@ -26,7 +26,7 @@ class RadioGroupFixture extends React.Component {
26
27
render() {
28
const {changeCount} = this.state;
29
- const color = changeCount === 2 ? 'green' : 'red';
29
+ const color = changeCount >= 3 ? 'green' : 'red';
30
31
return (
32
<Fixture>
fixtures/dom/src/components/fixtures/input-change-events/index.js
+3
-1
@@ -57,10 +57,12 @@ class InputChangeEvents extends React.Component {
57
<TestCase.Steps>
58
<li>Click on the "Radio 2"</li>
59
<li>Click back to "Radio 1"</li>
60
+ <li>Click back to "Radio 2"</li>
61
</TestCase.Steps>
62
63
<TestCase.ExpectedResult>
63
- The <code>onChange</code> call count should equal 2
64
+ The <code>onChange</code> call count increment on each value change
65
+ (at least 3+)
66
</TestCase.ExpectedResult>
67
68
<RadioGroupFixture />
packages/react-dom/src/client/ReactDOMFiberComponent.js
-4
@@ -782,10 +782,6 @@ export function updateProperties(
782
// happen after `updateDOMProperties`. Otherwise HTML5 input validations
783
// raise warnings and prevent the new value from being assigned.
784
ReactDOMFiberInput.updateWrapper(domElement, nextRawProps);
785
-
786
- // We also check that we haven't missed a value update, such as a
787
- // Radio group shifting the checked value to another named radio input.
788
- inputValueTracking.updateValueIfChanged((domElement: any));
785
break;
786
case 'textarea':
787
ReactDOMFiberTextarea.updateWrapper(domElement, nextRawProps);
packages/react-dom/src/client/ReactDOMFiberInput.js
+6
@@ -15,6 +15,7 @@ import warning from 'fbjs/lib/warning';
15
import * as DOMPropertyOperations from './DOMPropertyOperations';
16
import {getFiberCurrentPropsFromNode} from './ReactDOMComponentTree';
17
import ReactControlledValuePropTypes from '../shared/ReactControlledValuePropTypes';
18
+import * as inputValueTracking from './inputValueTracking';
19
20
type InputWithWrapperState = HTMLInputElement & {
21
_wrapperState: {
@@ -320,6 +321,11 @@ function updateNamedCousins(rootNode, props) {
321
'ReactDOMInput: Mixing React and non-React radio inputs with the ' +
322
'same `name` is not supported.',
323
);
324
+
325
+ // We need update the tracked value on the named cousin since the value
326
+ // was changed but the input saw no event or value set
327
+ inputValueTracking.updateValueIfChanged(otherNode);
328
+
329
// If this is a controlled radio button group, forcing the input that
330
// was previously checked to update will cause it to be come re-checked
331
// as appropriate.
packages/react-dom/src/client/inputValueTracking.js
+1
-1
@@ -12,7 +12,7 @@ type ValueTracker = {
12
setValue(value: string): void,
13
stopTracking(): void,
14
};
15
-type WrapperState = {_valueTracker: ?ValueTracker};
15
+type WrapperState = {_valueTracker?: ?ValueTracker};
16
type ElementWithValueTracker = HTMLInputElement & WrapperState;
17
18
function isCheckable(elem: HTMLInputElement) {