mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
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:
@@ -1 +1 @@
|
||||
54baa7997c7b0bbd456460ead6e051655ea43790
|
||||
4f4c52a3c8f9c8a2d8133c654841fee257c37249
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user