diff --git a/fixtures/dom/src/components/fixtures/input-change-events/RadioGroupFixture.js b/fixtures/dom/src/components/fixtures/input-change-events/RadioGroupFixture.js index 876c4832e90..d046e4d9be1 100644 --- 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 ( diff --git a/fixtures/dom/src/components/fixtures/input-change-events/index.js b/fixtures/dom/src/components/fixtures/input-change-events/index.js index 1514aa66898..8390b080a44 100644 --- 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 {
  • Click on the "Radio 2"
  • Click back to "Radio 1"
  • +
  • Click back to "Radio 2"
  • - The onChange call count should equal 2 + The onChange call count increment on each value change + (at least 3+) diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js index 0eabc364af4..e49a3c3d248 100644 --- 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 index cc1425deee6..7c4b0444900 100644 --- 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 index 55ee6386545..afaed260832 100644 --- 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) {