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 [4f4c52a3c8](https://github.com/facebook/react/commit/4f4c52a3c8f9c8a2d8133c654841fee257c37249)
This commit is contained in:
sophiebits
2023-10-02 18:43:28 +00:00
parent 9d5682030e
commit fbf7069079
14 changed files with 66 additions and 46 deletions
+1 -1
View File
@@ -1 +1 @@
54baa7997c7b0bbd456460ead6e051655ea43790
4f4c52a3c8f9c8a2d8133c654841fee257c37249
+1 -1
View File
@@ -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,
+1 -1
View File
@@ -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";
@@ -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 (
@@ -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,
+8 -3
View File
@@ -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,
@@ -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";
@@ -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";
@@ -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 (
@@ -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 (
@@ -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,
@@ -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,
@@ -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";
@@ -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";