[Dialog] Fix Maximum update depth exceeded error with Suspense (#3700)

Author: michaldudak

packages/react/src/dialog/portal/DialogPortal.test.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { Dialog } from '@base-ui/react/dialog';
 import { createRenderer, describeConformance } from '#test-utils';
+import { expect } from 'vitest';
+import { screen } from '@mui/internal-test-utils';
 
 describe('<Dialog.Portal />', () => {
   const { render } = createRenderer();
@@ -11,4 +13,44 @@ describe('<Dialog.Portal />', () => {
       return render(<Dialog.Root open>{node}</Dialog.Root>);
     },
   }));
+
+  describe('Suspense integration', () => {
+    // Issue #3695
+    it('should not throw "Maximum update depth exceeded" when Suspense boundary is outside Portal', async () => {
+      function createLazyComponent() {
+        let resolvePromise: ((value: { default: React.ComponentType }) => void) | null = null;
+        const promise = new Promise<{ default: React.ComponentType }>((resolve) => {
+          resolvePromise = resolve;
+        });
+
+        return {
+          LazyComponent: React.lazy(() => promise),
+          resolve(value: { default: React.ComponentType }) {
+            if (!resolvePromise) {
+              throw new Error('Lazy message resolver not initialized.');
+            }
+            resolvePromise(value);
+          },
+        };
+      }
+
+      const { LazyComponent, resolve } = createLazyComponent();
+
+      await render(
+        <React.Suspense fallback="Loading...">
+          <Dialog.Root open>
+            <Dialog.Portal>
+              <Dialog.Popup>
+                <LazyComponent />
+              </Dialog.Popup>
+            </Dialog.Portal>
+          </Dialog.Root>
+        </React.Suspense>,
+      );
+
+      expect(await screen.findByText('Loading...')).not.to.equal(null);
+      resolve({ default: () => <p>Greetings</p> });
+      expect(await screen.findByText('Greetings')).not.to.equal(null);
+    });
+  });
 });

packages/react/src/dialog/portal/DialogPortal.tsx

@@ -22,6 +22,7 @@ export const DialogPortal = React.forwardRef(function DialogPortal(
   const { store } = useDialogRootContext();
   const mounted = store.useState('mounted');
   const modal = store.useState('modal');
+  const open = store.useState('open');
 
   const shouldRender = mounted || keepMounted;
   if (!shouldRender) {

packages/react/src/floating-ui-react/components/FloatingPortal.tsx

@@ -4,6 +4,7 @@ import * as ReactDOM from 'react-dom';
 import { isNode } from '@floating-ui/utils/dom';
 import { useId } from '@base-ui/utils/useId';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { FocusGuard } from '../../utils/FocusGuard';
 import {
   enableFocusInside,
@@ -72,6 +73,14 @@ export function useFloatingPortalNode(
     null,
   );
   const [portalNode, setPortalNode] = React.useState<HTMLElement | null>(null);
+  const setPortalNodeRef = useStableCallback((node: HTMLElement | null) => {
+    if (node !== null) {
+      // the useIsoLayoutEffect below watching containerProp / parentPortalNode
+      // sets setPortalNode(null) when the container becomes null or changes.
+      // So even though the ref callback now ignores null, the portal node still gets cleared.
+      setPortalNode(node);
+    }
+  });
 
   const containerRef = React.useRef<HTMLElement | ShadowRoot | null>(null);
 
@@ -113,7 +122,7 @@ export function useFloatingPortalNode(
   }, [containerProp, parentPortalNode, uniqueId]);
 
   const portalElement = useRenderElement('div', componentProps, {
-    ref: [ref, setPortalNode],
+    ref: [ref, setPortalNodeRef],
     state: elementState,
     props: [
       {