[Fizz] Skip past hidden inputs when attempting to hydrate hydration boundaries

Author: eps1lon

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -3580,7 +3580,14 @@ function canHydrateHydrationBoundary(
   inRootOrSingleton: boolean,
 ): null | SuspenseInstance | ActivityInstance {
   while (instance.nodeType !== COMMENT_NODE) {
-    if (!inRootOrSingleton) {
+    if (
+      instance.nodeType === ELEMENT_NODE &&
+      instance.nodeName === 'INPUT' &&
+      (instance: any).type === 'hidden'
+    ) {
+      // If we have extra hidden inputs, we don't mismatch. This allows us to
+      // embed extra form data in the original form.
+    } else if (!inRootOrSingleton) {
       return null;
     }
     const nextInstance = getNextHydratableSibling(instance);

packages/react-dom/src/__tests__/ReactDOMFizzForm-test.js

@@ -23,6 +23,7 @@ let container;
 let React;
 let ReactDOMServer;
 let ReactDOMClient;
+let Suspense;
 let useFormStatus;
 let useOptimistic;
 let useActionState;
@@ -35,6 +36,7 @@ describe('ReactDOMFizzForm', () => {
     React = require('react');
     ReactDOMServer = require('react-dom/server.browser');
     ReactDOMClient = require('react-dom/client');
+    Suspense = React.Suspense;
     useFormStatus = require('react-dom').useFormStatus;
     useOptimistic = require('react').useOptimistic;
     act = require('internal-test-utils').act;
@@ -588,6 +590,7 @@ describe('ReactDOMFizzForm', () => {
     function App() {
       return (
         <form action={action} ref={ref} method={null}>
+          <Suspense />
           <input type="text" name="foo" defaultValue="bar" />
         </form>
       );