Switching checked to null should leave the current value (#26667)

I accidentally made a behavior change in the refactor. It turns out that when switching off `checked` to an uncontrolled component, we used to revert to the concept of "initialChecked" which used to be stored on state. When there's a diff to this computed prop and the value of props.checked is null, then we end up in a case where it sets `checked` to `initialChecked`: https://github.com/facebook/react/blob/5cbe6258bc436b1683080a6d978c27849f1d9a22/packages/react-dom-bindings/src/client/ReactDOMInput.js#L69 Since we never changed `initialChecked` and it's not relevant if non-null `checked` changes value, the only way this "change" could trigger was if we move from having `checked` to having null. This wasn't really consistent with how `value` works, where we instead leave the current value in place regardless. So this is a "bug fix" that changes `checked` to be consistent with `value` and just leave the current value in place. This case should already have a warning in it regardless since it's going from controlled to uncontrolled. Related to that, there was also another issue observed in https://github.com/facebook/react/pull/26596#discussion_r1162295872 and https://github.com/facebook/react/pull/26588 We need to atomically apply mutations on radio buttons. I fixed this by setting the name to empty before doing mutations to value/checked/type in updateInput, and then set the name to whatever it should be. Setting the name is what ends up atomically applying the changes. --------- Co-authored-by: Sophie Alpert <git@sophiebits.com> DiffTrain build for commit https://github.com/facebook/react/commit/1f248bdd7199979b050e4040ceecfe72dd977fd1.
2025-11-01 09:12:30 +00:00 · 2023-04-19 15:51:16 +00:00
parent 5b6046d0da
commit 9a2dba7484
13 changed files with 19 additions and 19 deletions
@@ -23745,7 +23745,7 @@ function createFiberRoot(
  return root;
 }

-var ReactVersion = "18.3.0-next-b90e8ebaa-20230419";
+var ReactVersion = "18.3.0-next-1f248bdd7-20230419";

 // Might add PROFILE later.

@@ -8587,7 +8587,7 @@ var devToolsConfig$jscomp$inline_1023 = {
    throw Error("TestRenderer does not support findFiberByHostInstance()");
  },
  bundleType: 0,
-  version: "18.3.0-next-b90e8ebaa-20230419",
+  version: "18.3.0-next-1f248bdd7-20230419",
  rendererPackageName: "react-test-renderer"
 };
 var internals$jscomp$inline_1206 = {
@@ -8618,7 +8618,7 @@ var internals$jscomp$inline_1206 = {
  scheduleRoot: null,
  setRefreshHandler: null,
  getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-next-b90e8ebaa-20230419"
+  reconcilerVersion: "18.3.0-next-1f248bdd7-20230419"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
  var hook$jscomp$inline_1207 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -9013,7 +9013,7 @@ var devToolsConfig$jscomp$inline_1065 = {
    throw Error("TestRenderer does not support findFiberByHostInstance()");
  },
  bundleType: 0,
-  version: "18.3.0-next-b90e8ebaa-20230419",
+  version: "18.3.0-next-1f248bdd7-20230419",
  rendererPackageName: "react-test-renderer"
 };
 var internals$jscomp$inline_1247 = {
@@ -9044,7 +9044,7 @@ var internals$jscomp$inline_1247 = {
  scheduleRoot: null,
  setRefreshHandler: null,
  getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-next-b90e8ebaa-20230419"
+  reconcilerVersion: "18.3.0-next-1f248bdd7-20230419"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
  var hook$jscomp$inline_1248 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -27,7 +27,7 @@ if (
 }
          "use strict";

-var ReactVersion = "18.3.0-next-b90e8ebaa-20230419";
+var ReactVersion = "18.3.0-next-1f248bdd7-20230419";

 // ATTENTION
 // When adding new symbols to this file,
@@ -639,4 +639,4 @@ exports.useSyncExternalStore = function (
  );
 };
 exports.useTransition = useTransition;
-exports.version = "18.3.0-next-b90e8ebaa-20230419";
+exports.version = "18.3.0-next-1f248bdd7-20230419";
@@ -642,7 +642,7 @@ exports.useSyncExternalStore = function (
  );
 };
 exports.useTransition = useTransition;
-exports.version = "18.3.0-next-b90e8ebaa-20230419";
+exports.version = "18.3.0-next-1f248bdd7-20230419";

          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (
@@ -1 +1 @@
-b90e8ebaa5b692bcee4198eacb56f9123b62dd10
+1f248bdd7199979b050e4040ceecfe72dd977fd1
@@ -27052,7 +27052,7 @@ function createFiberRoot(
  return root;
 }

-var ReactVersion = "18.3.0-next-b90e8ebaa-20230419";
+var ReactVersion = "18.3.0-next-1f248bdd7-20230419";

 function createPortal$1(
  children,
@@ -9456,7 +9456,7 @@ var roots = new Map(),
  devToolsConfig$jscomp$inline_1047 = {
    findFiberByHostInstance: getInstanceFromNode,
    bundleType: 0,
-    version: "18.3.0-next-b90e8ebaa-20230419",
+    version: "18.3.0-next-1f248bdd7-20230419",
    rendererPackageName: "react-native-renderer",
    rendererConfig: {
      getInspectorDataForViewTag: function () {
@@ -9498,7 +9498,7 @@ var internals$jscomp$inline_1276 = {
  scheduleRoot: null,
  setRefreshHandler: null,
  getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-next-b90e8ebaa-20230419"
+  reconcilerVersion: "18.3.0-next-1f248bdd7-20230419"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
  var hook$jscomp$inline_1277 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -10165,7 +10165,7 @@ var roots = new Map(),
  devToolsConfig$jscomp$inline_1125 = {
    findFiberByHostInstance: getInstanceFromNode,
    bundleType: 0,
-    version: "18.3.0-next-b90e8ebaa-20230419",
+    version: "18.3.0-next-1f248bdd7-20230419",
    rendererPackageName: "react-native-renderer",
    rendererConfig: {
      getInspectorDataForViewTag: function () {
@@ -10220,7 +10220,7 @@ var roots = new Map(),
  scheduleRoot: null,
  setRefreshHandler: null,
  getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-next-b90e8ebaa-20230419"
+  reconcilerVersion: "18.3.0-next-1f248bdd7-20230419"
 });
 exports.createPortal = function (children, containerTag) {
  return createPortal$1(
@@ -27565,7 +27565,7 @@ function createFiberRoot(
  return root;
 }

-var ReactVersion = "18.3.0-next-b90e8ebaa-20230419";
+var ReactVersion = "18.3.0-next-1f248bdd7-20230419";

 function createPortal$1(
  children,
@@ -9715,7 +9715,7 @@ var roots = new Map(),
  devToolsConfig$jscomp$inline_1102 = {
    findFiberByHostInstance: getInstanceFromTag,
    bundleType: 0,
-    version: "18.3.0-next-b90e8ebaa-20230419",
+    version: "18.3.0-next-1f248bdd7-20230419",
    rendererPackageName: "react-native-renderer",
    rendererConfig: {
      getInspectorDataForViewTag: function () {
@@ -9757,7 +9757,7 @@ var internals$jscomp$inline_1345 = {
  scheduleRoot: null,
  setRefreshHandler: null,
  getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-next-b90e8ebaa-20230419"
+  reconcilerVersion: "18.3.0-next-1f248bdd7-20230419"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
  var hook$jscomp$inline_1346 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -10424,7 +10424,7 @@ var roots = new Map(),
  devToolsConfig$jscomp$inline_1180 = {
    findFiberByHostInstance: getInstanceFromTag,
    bundleType: 0,
-    version: "18.3.0-next-b90e8ebaa-20230419",
+    version: "18.3.0-next-1f248bdd7-20230419",
    rendererPackageName: "react-native-renderer",
    rendererConfig: {
      getInspectorDataForViewTag: function () {
@@ -10479,7 +10479,7 @@ var roots = new Map(),
  scheduleRoot: null,
  setRefreshHandler: null,
  getCurrentFiber: null,
-  reconcilerVersion: "18.3.0-next-b90e8ebaa-20230419"
+  reconcilerVersion: "18.3.0-next-1f248bdd7-20230419"
 });
 exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = {
  computeComponentStackForErrorReporting: function (reactTag) {