Fix checkbox and radio hydration (#27401)

Fixes whatever part of #26876 and vercel/next.js#49499 that #27394 didn't fix, probably. From manual tests I believe this behavior brings us back to parity with latest stable release (18.2.0). It's awkward that we keep the user's state even for controlled inputs, so the DOM is out of sync with React state. Previously the .defaultChecked assignment done in updateInput() was changing the actual checkedness because the dirty flag wasn't getting set, meaning that hydrating could change which radio button is checked, even in the absence of user interaction! Now we go back to always detaching again. DiffTrain build for [db69f95](db69f95)
facebook · Oct 3, 2023 · 3d74031 · 3d74031
1 parent fbf7069
commit 3d74031
Show file tree

Hide file tree

Showing 14 changed files with 52 additions and 56 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-4f4c52a3c8f9c8a2d8133c654841fee257c37249
+db69f95e4876ec3c24117f58d55cbb4f315b9fa7
diff --git 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-ff54ec02";
+var ReactVersion = "18.3.0-www-classic-136a3d2d";
 
 // 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
@@ -615,4 +615,4 @@ exports.useSyncExternalStore = function (
 exports.useTransition = function () {
   return ReactCurrentDispatcher.current.useTransition();
 };
-exports.version = "18.3.0-www-modern-dc699db3";
+exports.version = "18.3.0-www-modern-939a7938";
diff --git 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-622fc29e";
+exports.version = "18.3.0-www-modern-de10697a";
 
           /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (

diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js
@@ -4016,13 +4016,12 @@ function initInput(
   var initialChecked =
     typeof checkedOrDefault !== "function" &&
     typeof checkedOrDefault !== "symbol" &&
-    !!checkedOrDefault; // The checked property never gets assigned. It must be manually set.
-  // We don't want to do this when hydrating so that existing user input isn't
-  // modified
-  // TODO: I'm pretty sure this is a bug because initialValueTracking won't be
-  // correct for the hydration case then.
+    !!checkedOrDefault;
 
-  if (!isHydrating) {
+  if (isHydrating) {
+    // Detach .checked from .defaultChecked but leave user input alone
+    node.checked = node.checked;
+  } else {
     node.checked = !!initialChecked;
   }
 
@@ -33977,7 +33976,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-9c42e3d4";
+var ReactVersion = "18.3.0-www-classic-85c09bff";
 
 function createPortal$1(
   children,

diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js
@@ -3858,13 +3858,12 @@ function initInput(
   var initialChecked =
     typeof checkedOrDefault !== "function" &&
     typeof checkedOrDefault !== "symbol" &&
-    !!checkedOrDefault; // The checked property never gets assigned. It must be manually set.
-  // We don't want to do this when hydrating so that existing user input isn't
-  // modified
-  // TODO: I'm pretty sure this is a bug because initialValueTracking won't be
-  // correct for the hydration case then.
+    !!checkedOrDefault;
 
-  if (!isHydrating) {
+  if (isHydrating) {
+    // Detach .checked from .defaultChecked but leave user input alone
+    node.checked = node.checked;
+  } else {
     node.checked = !!initialChecked;
   }
 
@@ -33822,7 +33821,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-752f226e";
+var ReactVersion = "18.3.0-www-modern-c7df3b44";
 
 function createPortal$1(
   children,

diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js
@@ -1084,7 +1084,7 @@ function initInput(
   }
   value = null != checked ? checked : defaultChecked;
   value = "function" !== typeof value && "symbol" !== typeof value && !!value;
-  isHydrating || (element.checked = !!value);
+  element.checked = isHydrating ? element.checked : !!value;
   disableInputAttributeSyncing
     ? null != defaultChecked && (element.defaultChecked = !!defaultChecked)
     : (element.defaultChecked = !!value);
@@ -16375,7 +16375,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1779 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-4ef77085",
+  version: "18.3.0-www-classic-a202a369",
   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-4ef77085"
+  reconcilerVersion: "18.3.0-www-classic-a202a369"
 };
 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-4ef77085";
+exports.version = "18.3.0-www-classic-a202a369";
diff --git a/compiled/facebook-www/ReactDOM-prod.modern.js b/compiled/facebook-www/ReactDOM-prod.modern.js
@@ -938,7 +938,7 @@ function initInput(
   }
   value = null != checked ? checked : defaultChecked;
   value = "function" !== typeof value && "symbol" !== typeof value && !!value;
-  isHydrating || (element.checked = !!value);
+  element.checked = isHydrating ? element.checked : !!value;
   disableInputAttributeSyncing
     ? null != defaultChecked && (element.defaultChecked = !!defaultChecked)
     : (element.defaultChecked = !!value);
@@ -15897,7 +15897,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1738 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-7f3360c5",
+  version: "18.3.0-www-modern-7e008df6",
   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-7f3360c5"
+  reconcilerVersion: "18.3.0-www-modern-7e008df6"
 };
 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-7f3360c5";
+exports.version = "18.3.0-www-modern-7e008df6";
diff --git a/compiled/facebook-www/ReactDOM-profiling.classic.js b/compiled/facebook-www/ReactDOM-profiling.classic.js
@@ -1228,7 +1228,7 @@ function initInput(
   }
   value = null != checked ? checked : defaultChecked;
   value = "function" !== typeof value && "symbol" !== typeof value && !!value;
-  isHydrating || (element.checked = !!value);
+  element.checked = isHydrating ? element.checked : !!value;
   disableInputAttributeSyncing
     ? null != defaultChecked && (element.defaultChecked = !!defaultChecked)
     : (element.defaultChecked = !!value);
@@ -17150,7 +17150,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1864 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-9802da3a",
+  version: "18.3.0-www-classic-bf660d13",
   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-9802da3a"
+  reconcilerVersion: "18.3.0-www-classic-bf660d13"
 });
 assign(Internals, {
   ReactBrowserEventEmitter: {
@@ -17518,7 +17518,7 @@ exports.unstable_renderSubtreeIntoContainer = function (
   );
 };
 exports.unstable_runWithPriority = runWithPriority;
-exports.version = "18.3.0-www-classic-9802da3a";
+exports.version = "18.3.0-www-classic-bf660d13";
 
           /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (

diff --git a/compiled/facebook-www/ReactDOM-profiling.modern.js b/compiled/facebook-www/ReactDOM-profiling.modern.js
@@ -1082,7 +1082,7 @@ function initInput(
   }
   value = null != checked ? checked : defaultChecked;
   value = "function" !== typeof value && "symbol" !== typeof value && !!value;
-  isHydrating || (element.checked = !!value);
+  element.checked = isHydrating ? element.checked : !!value;
   disableInputAttributeSyncing
     ? null != defaultChecked && (element.defaultChecked = !!defaultChecked)
     : (element.defaultChecked = !!value);
@@ -16666,7 +16666,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1823 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-ea3ac45f",
+  version: "18.3.0-www-modern-9d2908e6",
   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-ea3ac45f"
+  reconcilerVersion: "18.3.0-www-modern-9d2908e6"
 });
 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-ea3ac45f";
+exports.version = "18.3.0-www-modern-9d2908e6";
 
           /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
 if (

diff --git a/compiled/facebook-www/ReactDOMTesting-dev.classic.js b/compiled/facebook-www/ReactDOMTesting-dev.classic.js
@@ -4150,13 +4150,12 @@ function initInput(
   var initialChecked =
     typeof checkedOrDefault !== "function" &&
     typeof checkedOrDefault !== "symbol" &&
-    !!checkedOrDefault; // The checked property never gets assigned. It must be manually set.
-  // We don't want to do this when hydrating so that existing user input isn't
-  // modified
-  // TODO: I'm pretty sure this is a bug because initialValueTracking won't be
-  // correct for the hydration case then.
+    !!checkedOrDefault;
 
-  if (!isHydrating) {
+  if (isHydrating) {
+    // Detach .checked from .defaultChecked but leave user input alone
+    node.checked = node.checked;
+  } else {
     node.checked = !!initialChecked;
   }
 
@@ -34594,7 +34593,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-classic-ffc4f8d2";
+var ReactVersion = "18.3.0-www-classic-32c273fd";
 
 function createPortal$1(
   children,

diff --git a/compiled/facebook-www/ReactDOMTesting-dev.modern.js b/compiled/facebook-www/ReactDOMTesting-dev.modern.js
@@ -3992,13 +3992,12 @@ function initInput(
   var initialChecked =
     typeof checkedOrDefault !== "function" &&
     typeof checkedOrDefault !== "symbol" &&
-    !!checkedOrDefault; // The checked property never gets assigned. It must be manually set.
-  // We don't want to do this when hydrating so that existing user input isn't
-  // modified
-  // TODO: I'm pretty sure this is a bug because initialValueTracking won't be
-  // correct for the hydration case then.
+    !!checkedOrDefault;
 
-  if (!isHydrating) {
+  if (isHydrating) {
+    // Detach .checked from .defaultChecked but leave user input alone
+    node.checked = node.checked;
+  } else {
     node.checked = !!initialChecked;
   }
 
@@ -34439,7 +34438,7 @@ function createFiberRoot(
   return root;
 }
 
-var ReactVersion = "18.3.0-www-modern-dc699db3";
+var ReactVersion = "18.3.0-www-modern-939a7938";
 
 function createPortal$1(
   children,

diff --git a/compiled/facebook-www/ReactDOMTesting-prod.classic.js b/compiled/facebook-www/ReactDOMTesting-prod.classic.js
@@ -1170,7 +1170,7 @@ function initInput(
   }
   value = null != checked ? checked : defaultChecked;
   value = "function" !== typeof value && "symbol" !== typeof value && !!value;
-  isHydrating || (element.checked = !!value);
+  element.checked = isHydrating ? element.checked : !!value;
   disableInputAttributeSyncing
     ? null != defaultChecked && (element.defaultChecked = !!defaultChecked)
     : (element.defaultChecked = !!value);
@@ -16704,7 +16704,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1808 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-classic-ff54ec02",
+  version: "18.3.0-www-classic-136a3d2d",
   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-ff54ec02"
+  reconcilerVersion: "18.3.0-www-classic-136a3d2d"
 };
 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-ff54ec02";
+exports.version = "18.3.0-www-classic-136a3d2d";
diff --git a/compiled/facebook-www/ReactDOMTesting-prod.modern.js b/compiled/facebook-www/ReactDOMTesting-prod.modern.js
@@ -1079,7 +1079,7 @@ function initInput(
   }
   value = null != checked ? checked : defaultChecked;
   value = "function" !== typeof value && "symbol" !== typeof value && !!value;
-  isHydrating || (element.checked = !!value);
+  element.checked = isHydrating ? element.checked : !!value;
   disableInputAttributeSyncing
     ? null != defaultChecked && (element.defaultChecked = !!defaultChecked)
     : (element.defaultChecked = !!value);
@@ -16281,7 +16281,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1767 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "18.3.0-www-modern-622fc29e",
+  version: "18.3.0-www-modern-de10697a",
   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-622fc29e"
+  reconcilerVersion: "18.3.0-www-modern-de10697a"
 };
 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-622fc29e";
+exports.version = "18.3.0-www-modern-de10697a";