Skip to content

Commit 3d74031

Browse files
sophiebitssophiebits
committed
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)
1 parent fbf7069 commit 3d74031

14 files changed

+52
-56
lines changed

‎compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
4f4c52a3c8f9c8a2d8133c654841fee257c37249
1+
db69f95e4876ec3c24117f58d55cbb4f315b9fa7

‎compiled/facebook-www/React-dev.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ if (
2727
}
2828
"use strict";
2929

30-
var ReactVersion = "18.3.0-www-classic-ff54ec02";
30+
var ReactVersion = "18.3.0-www-classic-136a3d2d";
3131

3232
// ATTENTION
3333
// When adding new symbols to this file,

‎compiled/facebook-www/React-prod.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -615,4 +615,4 @@ exports.useSyncExternalStore = function (
615615
exports.useTransition = function () {
616616
return ReactCurrentDispatcher.current.useTransition();
617617
};
618-
exports.version = "18.3.0-www-modern-dc699db3";
618+
exports.version = "18.3.0-www-modern-939a7938";

‎compiled/facebook-www/React-profiling.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -626,7 +626,7 @@ exports.useSyncExternalStore = function (
626626
exports.useTransition = function () {
627627
return ReactCurrentDispatcher.current.useTransition();
628628
};
629-
exports.version = "18.3.0-www-modern-622fc29e";
629+
exports.version = "18.3.0-www-modern-de10697a";
630630

631631
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
632632
if (

‎compiled/facebook-www/ReactDOM-dev.classic.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4016,13 +4016,12 @@ function initInput(
40164016
var initialChecked =
40174017
typeof checkedOrDefault !== "function" &&
40184018
typeof checkedOrDefault !== "symbol" &&
4019-
!!checkedOrDefault; // The checked property never gets assigned. It must be manually set.
4020-
// We don't want to do this when hydrating so that existing user input isn't
4021-
// modified
4022-
// TODO: I'm pretty sure this is a bug because initialValueTracking won't be
4023-
// correct for the hydration case then.
4019+
!!checkedOrDefault;
40244020

4025-
if (!isHydrating) {
4021+
if (isHydrating) {
4022+
// Detach .checked from .defaultChecked but leave user input alone
4023+
node.checked = node.checked;
4024+
} else {
40264025
node.checked = !!initialChecked;
40274026
}
40284027

@@ -33977,7 +33976,7 @@ function createFiberRoot(
3397733976
return root;
3397833977
}
3397933978

33980-
var ReactVersion = "18.3.0-www-classic-9c42e3d4";
33979+
var ReactVersion = "18.3.0-www-classic-85c09bff";
3398133980

3398233981
function createPortal$1(
3398333982
children,

‎compiled/facebook-www/ReactDOM-dev.modern.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3858,13 +3858,12 @@ function initInput(
38583858
var initialChecked =
38593859
typeof checkedOrDefault !== "function" &&
38603860
typeof checkedOrDefault !== "symbol" &&
3861-
!!checkedOrDefault; // The checked property never gets assigned. It must be manually set.
3862-
// We don't want to do this when hydrating so that existing user input isn't
3863-
// modified
3864-
// TODO: I'm pretty sure this is a bug because initialValueTracking won't be
3865-
// correct for the hydration case then.
3861+
!!checkedOrDefault;
38663862

3867-
if (!isHydrating) {
3863+
if (isHydrating) {
3864+
// Detach .checked from .defaultChecked but leave user input alone
3865+
node.checked = node.checked;
3866+
} else {
38683867
node.checked = !!initialChecked;
38693868
}
38703869

@@ -33822,7 +33821,7 @@ function createFiberRoot(
3382233821
return root;
3382333822
}
3382433823

33825-
var ReactVersion = "18.3.0-www-modern-752f226e";
33824+
var ReactVersion = "18.3.0-www-modern-c7df3b44";
3382633825

3382733826
function createPortal$1(
3382833827
children,

‎compiled/facebook-www/ReactDOM-prod.classic.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1084,7 +1084,7 @@ function initInput(
10841084
}
10851085
value = null != checked ? checked : defaultChecked;
10861086
value = "function" !== typeof value && "symbol" !== typeof value && !!value;
1087-
isHydrating || (element.checked = !!value);
1087+
element.checked = isHydrating ? element.checked : !!value;
10881088
disableInputAttributeSyncing
10891089
? null != defaultChecked && (element.defaultChecked = !!defaultChecked)
10901090
: (element.defaultChecked = !!value);
@@ -16375,7 +16375,7 @@ Internals.Events = [
1637516375
var devToolsConfig$jscomp$inline_1779 = {
1637616376
findFiberByHostInstance: getClosestInstanceFromNode,
1637716377
bundleType: 0,
16378-
version: "18.3.0-www-classic-4ef77085",
16378+
version: "18.3.0-www-classic-a202a369",
1637916379
rendererPackageName: "react-dom"
1638016380
};
1638116381
var internals$jscomp$inline_2123 = {
@@ -16405,7 +16405,7 @@ var internals$jscomp$inline_2123 = {
1640516405
scheduleRoot: null,
1640616406
setRefreshHandler: null,
1640716407
getCurrentFiber: null,
16408-
reconcilerVersion: "18.3.0-www-classic-4ef77085"
16408+
reconcilerVersion: "18.3.0-www-classic-a202a369"
1640916409
};
1641016410
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1641116411
var hook$jscomp$inline_2124 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16742,4 +16742,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
1674216742
);
1674316743
};
1674416744
exports.unstable_runWithPriority = runWithPriority;
16745-
exports.version = "18.3.0-www-classic-4ef77085";
16745+
exports.version = "18.3.0-www-classic-a202a369";

‎compiled/facebook-www/ReactDOM-prod.modern.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -938,7 +938,7 @@ function initInput(
938938
}
939939
value = null != checked ? checked : defaultChecked;
940940
value = "function" !== typeof value && "symbol" !== typeof value && !!value;
941-
isHydrating || (element.checked = !!value);
941+
element.checked = isHydrating ? element.checked : !!value;
942942
disableInputAttributeSyncing
943943
? null != defaultChecked && (element.defaultChecked = !!defaultChecked)
944944
: (element.defaultChecked = !!value);
@@ -15897,7 +15897,7 @@ Internals.Events = [
1589715897
var devToolsConfig$jscomp$inline_1738 = {
1589815898
findFiberByHostInstance: getClosestInstanceFromNode,
1589915899
bundleType: 0,
15900-
version: "18.3.0-www-modern-7f3360c5",
15900+
version: "18.3.0-www-modern-7e008df6",
1590115901
rendererPackageName: "react-dom"
1590215902
};
1590315903
var internals$jscomp$inline_2087 = {
@@ -15928,7 +15928,7 @@ var internals$jscomp$inline_2087 = {
1592815928
scheduleRoot: null,
1592915929
setRefreshHandler: null,
1593015930
getCurrentFiber: null,
15931-
reconcilerVersion: "18.3.0-www-modern-7f3360c5"
15931+
reconcilerVersion: "18.3.0-www-modern-7e008df6"
1593215932
};
1593315933
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1593415934
var hook$jscomp$inline_2088 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16193,4 +16193,4 @@ exports.unstable_createEventHandle = function (type, options) {
1619316193
return eventHandle;
1619416194
};
1619516195
exports.unstable_runWithPriority = runWithPriority;
16196-
exports.version = "18.3.0-www-modern-7f3360c5";
16196+
exports.version = "18.3.0-www-modern-7e008df6";

‎compiled/facebook-www/ReactDOM-profiling.classic.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1228,7 +1228,7 @@ function initInput(
12281228
}
12291229
value = null != checked ? checked : defaultChecked;
12301230
value = "function" !== typeof value && "symbol" !== typeof value && !!value;
1231-
isHydrating || (element.checked = !!value);
1231+
element.checked = isHydrating ? element.checked : !!value;
12321232
disableInputAttributeSyncing
12331233
? null != defaultChecked && (element.defaultChecked = !!defaultChecked)
12341234
: (element.defaultChecked = !!value);
@@ -17150,7 +17150,7 @@ Internals.Events = [
1715017150
var devToolsConfig$jscomp$inline_1864 = {
1715117151
findFiberByHostInstance: getClosestInstanceFromNode,
1715217152
bundleType: 0,
17153-
version: "18.3.0-www-classic-9802da3a",
17153+
version: "18.3.0-www-classic-bf660d13",
1715417154
rendererPackageName: "react-dom"
1715517155
};
1715617156
(function (internals) {
@@ -17194,7 +17194,7 @@ var devToolsConfig$jscomp$inline_1864 = {
1719417194
scheduleRoot: null,
1719517195
setRefreshHandler: null,
1719617196
getCurrentFiber: null,
17197-
reconcilerVersion: "18.3.0-www-classic-9802da3a"
17197+
reconcilerVersion: "18.3.0-www-classic-bf660d13"
1719817198
});
1719917199
assign(Internals, {
1720017200
ReactBrowserEventEmitter: {
@@ -17518,7 +17518,7 @@ exports.unstable_renderSubtreeIntoContainer = function (
1751817518
);
1751917519
};
1752017520
exports.unstable_runWithPriority = runWithPriority;
17521-
exports.version = "18.3.0-www-classic-9802da3a";
17521+
exports.version = "18.3.0-www-classic-bf660d13";
1752217522

1752317523
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
1752417524
if (

‎compiled/facebook-www/ReactDOM-profiling.modern.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1082,7 +1082,7 @@ function initInput(
10821082
}
10831083
value = null != checked ? checked : defaultChecked;
10841084
value = "function" !== typeof value && "symbol" !== typeof value && !!value;
1085-
isHydrating || (element.checked = !!value);
1085+
element.checked = isHydrating ? element.checked : !!value;
10861086
disableInputAttributeSyncing
10871087
? null != defaultChecked && (element.defaultChecked = !!defaultChecked)
10881088
: (element.defaultChecked = !!value);
@@ -16666,7 +16666,7 @@ Internals.Events = [
1666616666
var devToolsConfig$jscomp$inline_1823 = {
1666716667
findFiberByHostInstance: getClosestInstanceFromNode,
1666816668
bundleType: 0,
16669-
version: "18.3.0-www-modern-ea3ac45f",
16669+
version: "18.3.0-www-modern-9d2908e6",
1667016670
rendererPackageName: "react-dom"
1667116671
};
1667216672
(function (internals) {
@@ -16711,7 +16711,7 @@ var devToolsConfig$jscomp$inline_1823 = {
1671116711
scheduleRoot: null,
1671216712
setRefreshHandler: null,
1671316713
getCurrentFiber: null,
16714-
reconcilerVersion: "18.3.0-www-modern-ea3ac45f"
16714+
reconcilerVersion: "18.3.0-www-modern-9d2908e6"
1671516715
});
1671616716
exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = Internals;
1671716717
exports.createPortal = function (children, container) {
@@ -16963,7 +16963,7 @@ exports.unstable_createEventHandle = function (type, options) {
1696316963
return eventHandle;
1696416964
};
1696516965
exports.unstable_runWithPriority = runWithPriority;
16966-
exports.version = "18.3.0-www-modern-ea3ac45f";
16966+
exports.version = "18.3.0-www-modern-9d2908e6";
1696716967

1696816968
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
1696916969
if (

‎compiled/facebook-www/ReactDOMTesting-dev.classic.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4150,13 +4150,12 @@ function initInput(
41504150
var initialChecked =
41514151
typeof checkedOrDefault !== "function" &&
41524152
typeof checkedOrDefault !== "symbol" &&
4153-
!!checkedOrDefault; // The checked property never gets assigned. It must be manually set.
4154-
// We don't want to do this when hydrating so that existing user input isn't
4155-
// modified
4156-
// TODO: I'm pretty sure this is a bug because initialValueTracking won't be
4157-
// correct for the hydration case then.
4153+
!!checkedOrDefault;
41584154

4159-
if (!isHydrating) {
4155+
if (isHydrating) {
4156+
// Detach .checked from .defaultChecked but leave user input alone
4157+
node.checked = node.checked;
4158+
} else {
41604159
node.checked = !!initialChecked;
41614160
}
41624161

@@ -34594,7 +34593,7 @@ function createFiberRoot(
3459434593
return root;
3459534594
}
3459634595

34597-
var ReactVersion = "18.3.0-www-classic-ffc4f8d2";
34596+
var ReactVersion = "18.3.0-www-classic-32c273fd";
3459834597

3459934598
function createPortal$1(
3460034599
children,

‎compiled/facebook-www/ReactDOMTesting-dev.modern.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3992,13 +3992,12 @@ function initInput(
39923992
var initialChecked =
39933993
typeof checkedOrDefault !== "function" &&
39943994
typeof checkedOrDefault !== "symbol" &&
3995-
!!checkedOrDefault; // The checked property never gets assigned. It must be manually set.
3996-
// We don't want to do this when hydrating so that existing user input isn't
3997-
// modified
3998-
// TODO: I'm pretty sure this is a bug because initialValueTracking won't be
3999-
// correct for the hydration case then.
3995+
!!checkedOrDefault;
40003996

4001-
if (!isHydrating) {
3997+
if (isHydrating) {
3998+
// Detach .checked from .defaultChecked but leave user input alone
3999+
node.checked = node.checked;
4000+
} else {
40024001
node.checked = !!initialChecked;
40034002
}
40044003

@@ -34439,7 +34438,7 @@ function createFiberRoot(
3443934438
return root;
3444034439
}
3444134440

34442-
var ReactVersion = "18.3.0-www-modern-dc699db3";
34441+
var ReactVersion = "18.3.0-www-modern-939a7938";
3444334442

3444434443
function createPortal$1(
3444534444
children,

‎compiled/facebook-www/ReactDOMTesting-prod.classic.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1170,7 +1170,7 @@ function initInput(
11701170
}
11711171
value = null != checked ? checked : defaultChecked;
11721172
value = "function" !== typeof value && "symbol" !== typeof value && !!value;
1173-
isHydrating || (element.checked = !!value);
1173+
element.checked = isHydrating ? element.checked : !!value;
11741174
disableInputAttributeSyncing
11751175
? null != defaultChecked && (element.defaultChecked = !!defaultChecked)
11761176
: (element.defaultChecked = !!value);
@@ -16704,7 +16704,7 @@ Internals.Events = [
1670416704
var devToolsConfig$jscomp$inline_1808 = {
1670516705
findFiberByHostInstance: getClosestInstanceFromNode,
1670616706
bundleType: 0,
16707-
version: "18.3.0-www-classic-ff54ec02",
16707+
version: "18.3.0-www-classic-136a3d2d",
1670816708
rendererPackageName: "react-dom"
1670916709
};
1671016710
var internals$jscomp$inline_2157 = {
@@ -16734,7 +16734,7 @@ var internals$jscomp$inline_2157 = {
1673416734
scheduleRoot: null,
1673516735
setRefreshHandler: null,
1673616736
getCurrentFiber: null,
16737-
reconcilerVersion: "18.3.0-www-classic-ff54ec02"
16737+
reconcilerVersion: "18.3.0-www-classic-136a3d2d"
1673816738
};
1673916739
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1674016740
var hook$jscomp$inline_2158 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17222,4 +17222,4 @@ exports.unstable_renderSubtreeIntoContainer = function (
1722217222
);
1722317223
};
1722417224
exports.unstable_runWithPriority = runWithPriority;
17225-
exports.version = "18.3.0-www-classic-ff54ec02";
17225+
exports.version = "18.3.0-www-classic-136a3d2d";

‎compiled/facebook-www/ReactDOMTesting-prod.modern.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1079,7 +1079,7 @@ function initInput(
10791079
}
10801080
value = null != checked ? checked : defaultChecked;
10811081
value = "function" !== typeof value && "symbol" !== typeof value && !!value;
1082-
isHydrating || (element.checked = !!value);
1082+
element.checked = isHydrating ? element.checked : !!value;
10831083
disableInputAttributeSyncing
10841084
? null != defaultChecked && (element.defaultChecked = !!defaultChecked)
10851085
: (element.defaultChecked = !!value);
@@ -16281,7 +16281,7 @@ Internals.Events = [
1628116281
var devToolsConfig$jscomp$inline_1767 = {
1628216282
findFiberByHostInstance: getClosestInstanceFromNode,
1628316283
bundleType: 0,
16284-
version: "18.3.0-www-modern-622fc29e",
16284+
version: "18.3.0-www-modern-de10697a",
1628516285
rendererPackageName: "react-dom"
1628616286
};
1628716287
var internals$jscomp$inline_2121 = {
@@ -16312,7 +16312,7 @@ var internals$jscomp$inline_2121 = {
1631216312
scheduleRoot: null,
1631316313
setRefreshHandler: null,
1631416314
getCurrentFiber: null,
16315-
reconcilerVersion: "18.3.0-www-modern-622fc29e"
16315+
reconcilerVersion: "18.3.0-www-modern-de10697a"
1631616316
};
1631716317
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1631816318
var hook$jscomp$inline_2122 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16728,4 +16728,4 @@ exports.unstable_createEventHandle = function (type, options) {
1672816728
return eventHandle;
1672916729
};
1673016730
exports.unstable_runWithPriority = runWithPriority;
16731-
exports.version = "18.3.0-www-modern-622fc29e";
16731+
exports.version = "18.3.0-www-modern-de10697a";

0 commit comments

Comments
 (0)