From fbf7069079a290db0ee2cc0c805a5debd22f2e5c Mon Sep 17 00:00:00 2001 From: sophiebits Date: Mon, 2 Oct 2023 18:43:28 +0000 Subject: [PATCH] Fix controlled radios, maybe for real this time (#27443) Fixes #26876 for real? In 18.2.0 (last stable), we set .checked unconditionally: https://github.com/facebook/react/blob/v18.2.0/packages/react-dom/src/client/ReactDOMInput.js#L129-L135 This is important because if we are updating two radios' checkedness from (false, true) to (true, false), we need to make sure that input2.checked is explicitly set to false, even though setting `input1.checked = true` already unchecks input2. I think this fix is not complete because there is no guarantee that all the inputs rerender at the same time? Hence the TODO. But in practice they usually would and I _think_ this is comparable to what we had before. Also treating function and symbol as false like we used to and like we do on initial mount. DiffTrain build for [4f4c52a3c8f9c8a2d8133c654841fee257c37249](https://github.com/facebook/react/commit/4f4c52a3c8f9c8a2d8133c654841fee257c37249) --- compiled/facebook-www/REVISION | 2 +- compiled/facebook-www/React-dev.classic.js | 2 +- compiled/facebook-www/React-prod.modern.js | 2 +- compiled/facebook-www/React-profiling.modern.js | 2 +- compiled/facebook-www/ReactDOM-dev.classic.js | 11 ++++++++--- compiled/facebook-www/ReactDOM-dev.modern.js | 11 ++++++++--- compiled/facebook-www/ReactDOM-prod.classic.js | 10 +++++----- compiled/facebook-www/ReactDOM-prod.modern.js | 10 +++++----- compiled/facebook-www/ReactDOM-profiling.classic.js | 10 +++++----- compiled/facebook-www/ReactDOM-profiling.modern.js | 10 +++++----- compiled/facebook-www/ReactDOMTesting-dev.classic.js | 11 ++++++++--- compiled/facebook-www/ReactDOMTesting-dev.modern.js | 11 ++++++++--- compiled/facebook-www/ReactDOMTesting-prod.classic.js | 10 +++++----- compiled/facebook-www/ReactDOMTesting-prod.modern.js | 10 +++++----- 14 files changed, 66 insertions(+), 46 deletions(-) diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION index c599901045..37b62eac5c 100644 --- a/compiled/facebook-www/REVISION +++ b/compiled/facebook-www/REVISION @@ -1 +1 @@ -54baa7997c7b0bbd456460ead6e051655ea43790 +4f4c52a3c8f9c8a2d8133c654841fee257c37249 diff --git a/compiled/facebook-www/React-dev.classic.js b/compiled/facebook-www/React-dev.classic.js index 8b2a3c6967..d2ace7acae 100644 --- a/compiled/facebook-www/React-dev.classic.js +++ b/compiled/facebook-www/React-dev.classic.js @@ -27,7 +27,7 @@ if ( } "use strict"; -var ReactVersion = "18.3.0-www-classic-591e80f2"; +var ReactVersion = "18.3.0-www-classic-ff54ec02"; // ATTENTION // When adding new symbols to this file, diff --git a/compiled/facebook-www/React-prod.modern.js b/compiled/facebook-www/React-prod.modern.js index e00693959c..9d9c98af19 100644 --- a/compiled/facebook-www/React-prod.modern.js +++ b/compiled/facebook-www/React-prod.modern.js @@ -615,4 +615,4 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-modern-96829b2e"; +exports.version = "18.3.0-www-modern-dc699db3"; diff --git a/compiled/facebook-www/React-profiling.modern.js b/compiled/facebook-www/React-profiling.modern.js index 34f058aad8..5cb36aaea3 100644 --- a/compiled/facebook-www/React-profiling.modern.js +++ b/compiled/facebook-www/React-profiling.modern.js @@ -626,7 +626,7 @@ exports.useSyncExternalStore = function ( exports.useTransition = function () { return ReactCurrentDispatcher.current.useTransition(); }; -exports.version = "18.3.0-www-modern-1a772a6d"; +exports.version = "18.3.0-www-modern-622fc29e"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js index da6adf94aa..bb1450b86d 100644 --- a/compiled/facebook-www/ReactDOM-dev.classic.js +++ b/compiled/facebook-www/ReactDOM-dev.classic.js @@ -3899,8 +3899,13 @@ function updateInput( } } - if (checked != null && node.checked !== !!checked) { - node.checked = checked; + if (checked != null) { + // Important to set this even if it's not a change in order to update input + // value tracking with radio buttons + // TODO: Should really update input value tracking for the whole radio + // button group in an effect or something (similar to #27024) + node.checked = + checked && typeof checked !== "function" && typeof checked !== "symbol"; } if ( @@ -33972,7 +33977,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-707e543f"; +var ReactVersion = "18.3.0-www-classic-9c42e3d4"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js index 7087eee621..7c14a17267 100644 --- a/compiled/facebook-www/ReactDOM-dev.modern.js +++ b/compiled/facebook-www/ReactDOM-dev.modern.js @@ -3741,8 +3741,13 @@ function updateInput( } } - if (checked != null && node.checked !== !!checked) { - node.checked = checked; + if (checked != null) { + // Important to set this even if it's not a change in order to update input + // value tracking with radio buttons + // TODO: Should really update input value tracking for the whole radio + // button group in an effect or something (similar to #27024) + node.checked = + checked && typeof checked !== "function" && typeof checked !== "symbol"; } if ( @@ -33817,7 +33822,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-b8e372cd"; +var ReactVersion = "18.3.0-www-modern-752f226e"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js index a995f63851..40aee006d8 100644 --- a/compiled/facebook-www/ReactDOM-prod.classic.js +++ b/compiled/facebook-www/ReactDOM-prod.classic.js @@ -1038,8 +1038,8 @@ function updateInput( null != defaultChecked && (element.defaultChecked = !!defaultChecked); null != checked && - element.checked !== !!checked && - (element.checked = checked); + (element.checked = + checked && "function" !== typeof checked && "symbol" !== typeof checked); null != name && "function" !== typeof name && "symbol" !== typeof name && @@ -16375,7 +16375,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1779 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-746b6ac2", + version: "18.3.0-www-classic-4ef77085", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2123 = { @@ -16405,7 +16405,7 @@ var internals$jscomp$inline_2123 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-746b6ac2" + reconcilerVersion: "18.3.0-www-classic-4ef77085" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2124 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -16742,4 +16742,4 @@ exports.unstable_renderSubtreeIntoContainer = function ( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-classic-746b6ac2"; +exports.version = "18.3.0-www-classic-4ef77085"; diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js index a72b860daf..57aa5e6afc 100644 --- a/compiled/facebook-www/ReactDOM-prod.modern.js +++ b/compiled/facebook-www/ReactDOM-prod.modern.js @@ -892,8 +892,8 @@ function updateInput( null != defaultChecked && (element.defaultChecked = !!defaultChecked); null != checked && - element.checked !== !!checked && - (element.checked = checked); + (element.checked = + checked && "function" !== typeof checked && "symbol" !== typeof checked); null != name && "function" !== typeof name && "symbol" !== typeof name && @@ -15897,7 +15897,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1738 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-84053073", + version: "18.3.0-www-modern-7f3360c5", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2087 = { @@ -15928,7 +15928,7 @@ var internals$jscomp$inline_2087 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-84053073" + reconcilerVersion: "18.3.0-www-modern-7f3360c5" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2088 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -16193,4 +16193,4 @@ exports.unstable_createEventHandle = function (type, options) { return eventHandle; }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-modern-84053073"; +exports.version = "18.3.0-www-modern-7f3360c5"; diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js index 89626e8542..80110caa45 100644 --- a/compiled/facebook-www/ReactDOM-profiling.classic.js +++ b/compiled/facebook-www/ReactDOM-profiling.classic.js @@ -1182,8 +1182,8 @@ function updateInput( null != defaultChecked && (element.defaultChecked = !!defaultChecked); null != checked && - element.checked !== !!checked && - (element.checked = checked); + (element.checked = + checked && "function" !== typeof checked && "symbol" !== typeof checked); null != name && "function" !== typeof name && "symbol" !== typeof name && @@ -17150,7 +17150,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1864 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-5a92b4d5", + version: "18.3.0-www-classic-9802da3a", rendererPackageName: "react-dom" }; (function (internals) { @@ -17194,7 +17194,7 @@ var devToolsConfig$jscomp$inline_1864 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-5a92b4d5" + reconcilerVersion: "18.3.0-www-classic-9802da3a" }); assign(Internals, { ReactBrowserEventEmitter: { @@ -17518,7 +17518,7 @@ exports.unstable_renderSubtreeIntoContainer = function ( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-classic-5a92b4d5"; +exports.version = "18.3.0-www-classic-9802da3a"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js index 812f9068a3..777a4ea209 100644 --- a/compiled/facebook-www/ReactDOM-profiling.modern.js +++ b/compiled/facebook-www/ReactDOM-profiling.modern.js @@ -1036,8 +1036,8 @@ function updateInput( null != defaultChecked && (element.defaultChecked = !!defaultChecked); null != checked && - element.checked !== !!checked && - (element.checked = checked); + (element.checked = + checked && "function" !== typeof checked && "symbol" !== typeof checked); null != name && "function" !== typeof name && "symbol" !== typeof name && @@ -16666,7 +16666,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1823 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-f998be57", + version: "18.3.0-www-modern-ea3ac45f", rendererPackageName: "react-dom" }; (function (internals) { @@ -16711,7 +16711,7 @@ var devToolsConfig$jscomp$inline_1823 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-f998be57" + reconcilerVersion: "18.3.0-www-modern-ea3ac45f" }); exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals; exports.createPortal = function (children, container) { @@ -16963,7 +16963,7 @@ exports.unstable_createEventHandle = function (type, options) { return eventHandle; }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-modern-f998be57"; +exports.version = "18.3.0-www-modern-ea3ac45f"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js index 383f324a60..c4d1dac3fb 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.classic.js @@ -4033,8 +4033,13 @@ function updateInput( } } - if (checked != null && node.checked !== !!checked) { - node.checked = checked; + if (checked != null) { + // Important to set this even if it's not a change in order to update input + // value tracking with radio buttons + // TODO: Should really update input value tracking for the whole radio + // button group in an effect or something (similar to #27024) + node.checked = + checked && typeof checked !== "function" && typeof checked !== "symbol"; } if ( @@ -34589,7 +34594,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-classic-49f3ea5b"; +var ReactVersion = "18.3.0-www-classic-ffc4f8d2"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js index 38c4fa2c3e..6e8c71cc85 100644 --- a/compiled/facebook-www/ReactDOMTesting-dev.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-dev.modern.js @@ -3875,8 +3875,13 @@ function updateInput( } } - if (checked != null && node.checked !== !!checked) { - node.checked = checked; + if (checked != null) { + // Important to set this even if it's not a change in order to update input + // value tracking with radio buttons + // TODO: Should really update input value tracking for the whole radio + // button group in an effect or something (similar to #27024) + node.checked = + checked && typeof checked !== "function" && typeof checked !== "symbol"; } if ( @@ -34434,7 +34439,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-www-modern-96829b2e"; +var ReactVersion = "18.3.0-www-modern-dc699db3"; function createPortal$1( children, diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js index c0e6a4ce51..5b6b21f79f 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.classic.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.classic.js @@ -1124,8 +1124,8 @@ function updateInput( null != defaultChecked && (element.defaultChecked = !!defaultChecked); null != checked && - element.checked !== !!checked && - (element.checked = checked); + (element.checked = + checked && "function" !== typeof checked && "symbol" !== typeof checked); null != name && "function" !== typeof name && "symbol" !== typeof name && @@ -16704,7 +16704,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1808 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-classic-591e80f2", + version: "18.3.0-www-classic-ff54ec02", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2157 = { @@ -16734,7 +16734,7 @@ var internals$jscomp$inline_2157 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-classic-591e80f2" + reconcilerVersion: "18.3.0-www-classic-ff54ec02" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2158 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -17222,4 +17222,4 @@ exports.unstable_renderSubtreeIntoContainer = function ( ); }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-classic-591e80f2"; +exports.version = "18.3.0-www-classic-ff54ec02"; diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js index 0d5b8263c7..a0f4872f94 100644 --- a/compiled/facebook-www/ReactDOMTesting-prod.modern.js +++ b/compiled/facebook-www/ReactDOMTesting-prod.modern.js @@ -1033,8 +1033,8 @@ function updateInput( null != defaultChecked && (element.defaultChecked = !!defaultChecked); null != checked && - element.checked !== !!checked && - (element.checked = checked); + (element.checked = + checked && "function" !== typeof checked && "symbol" !== typeof checked); null != name && "function" !== typeof name && "symbol" !== typeof name && @@ -16281,7 +16281,7 @@ Internals.Events = [ var devToolsConfig$jscomp$inline_1767 = { findFiberByHostInstance: getClosestInstanceFromNode, bundleType: 0, - version: "18.3.0-www-modern-1a772a6d", + version: "18.3.0-www-modern-622fc29e", rendererPackageName: "react-dom" }; var internals$jscomp$inline_2121 = { @@ -16312,7 +16312,7 @@ var internals$jscomp$inline_2121 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-www-modern-1a772a6d" + reconcilerVersion: "18.3.0-www-modern-622fc29e" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_2122 = __REACT_DEVTOOLS_GLOBAL_HOOK__; @@ -16728,4 +16728,4 @@ exports.unstable_createEventHandle = function (type, options) { return eventHandle; }; exports.unstable_runWithPriority = runWithPriority; -exports.version = "18.3.0-www-modern-1a772a6d"; +exports.version = "18.3.0-www-modern-622fc29e";