[Fizz] Skip past hidden inputs when attempting to hydrate hydration boundaries (#34302)
Sebastian "Sebbie" Silbermann committed
Aug 26, 2025 at 17:28 UTC
4123f6b771bb71a2831b1c450c385c38530125a0
2 files changed
+11
-1
packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
+8
-1
@@ -3580,7 +3580,14 @@ function canHydrateHydrationBoundary(
3580
inRootOrSingleton: boolean,
3581
): null | SuspenseInstance | ActivityInstance {
3582
while (instance.nodeType !== COMMENT_NODE) {
3583
- if (!inRootOrSingleton) {
3583
+ if (
3584
+ instance.nodeType === ELEMENT_NODE &&
3585
+ instance.nodeName === 'INPUT' &&
3586
+ (instance: any).type === 'hidden'
3587
+ ) {
3588
+ // If we have extra hidden inputs, we don't mismatch. This allows us to
3589
+ // embed extra form data in the original form.
3590
+ } else if (!inRootOrSingleton) {
3591
return null;
3592
}
3593
const nextInstance = getNextHydratableSibling(instance);
packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js
+3
@@ -23,6 +23,7 @@ let container;
23
let React;
24
let ReactDOMServer;
25
let ReactDOMClient;
26
+let Suspense;
27
let useFormStatus;
28
let useOptimistic;
29
let useActionState;
@@ -35,6 +36,7 @@ describe('ReactDOMFizzForm', () => {
36
React = require('react');
37
ReactDOMServer = require('react-dom/server.browser');
38
ReactDOMClient = require('react-dom/client');
39
+ Suspense = React.Suspense;
40
useFormStatus = require('react-dom').useFormStatus;
41
useOptimistic = require('react').useOptimistic;
42
act = require('internal-test-utils').act;
@@ -588,6 +590,7 @@ describe('ReactDOMFizzForm', () => {
590
function App() {
591
return (
592
<form action={action} ref={ref} method={null}>
593
+ <Suspense />
594
<input type="text" name="foo" defaultValue="bar" />
595
</form>
596
);