fix(dialog): keep DialogManagerProvider mounted on first render and stabilize manager identity

Author: MartinCupela

src/components/Dialog/__tests__/DialogManagerContext.test.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { vi } from 'vitest';
 import {
   DialogManagerProvider,
   useDialogManager,
 } from '../../../context/DialogManagerContext';
 
 import { useDialogIsOpen, useOpenedDialogCount } from '../hooks';
 
+vi.mock('../../../components/Dialog/service/DialogPortal', () => ({
+  DialogPortalDestination: () => null,
+}));
+
 const TEST_IDS = {
   CLOSE_DIALOG: 'close-dialog',
   DIALOG_COUNT: 'dialog-count',
@@ -89,6 +95,16 @@ describe('DialogManagerContext', () => {
       expect(screen.getByTestId(TEST_IDS.DIALOG_COUNT).textContent).toBe('0');
     });
 
+    it('renders children during SSR when id is provided', () => {
+      const html = renderToStaticMarkup(
+        <DialogManagerProvider id={TEST_MANAGER_ID}>
+          <div>server-rendered-child</div>
+        </DialogManagerProvider>,
+      );
+
+      expect(html).toContain('server-rendered-child');
+    });
+
     it('provides dialog manager to non-child components', () => {
       render(
         <DialogManagerProvider id={MANAGER_1_ID}>

src/context/DialogManagerContext.tsx

@@ -15,27 +15,12 @@ type DialogManagerId = string;
 
 type DialogManagersState = Record<DialogManagerId, DialogManager | undefined>;
 const dialogManagersRegistry: StateStore<DialogManagersState> = new StateStore({});
+const pendingDialogManagersById: Partial<Record<DialogManagerId, DialogManager>> = {};
+const dialogManagerMountCountsById: Partial<Record<DialogManagerId, number>> = {};
 
 const getDialogManager = (id: string): DialogManager | undefined =>
   dialogManagersRegistry.getLatestValue()[id];
 
-const getOrCreateDialogManager = ({
-  closeOnClickOutside,
-  id,
-}: {
-  closeOnClickOutside?: boolean;
-  id: string;
-}) => {
-  let manager = getDialogManager(id);
-  if (!manager) {
-    manager = new DialogManager({ closeOnClickOutside, id });
-    dialogManagersRegistry.partialNext({ [id]: manager });
-  } else if (typeof closeOnClickOutside === 'boolean') {
-    manager.closeOnClickOutside = closeOnClickOutside;
-  }
-  return manager;
-};
-
 const removeDialogManager = (id: string) => {
   if (!getDialogManager(id)) return;
   dialogManagersRegistry.partialNext({ [id]: undefined });
@@ -67,23 +52,50 @@ export const DialogManagerProvider = ({
   closeOnClickOutside,
   id,
 }: DialogManagerProviderProps) => {
-  const [dialogManager, setDialogManager] = useState<DialogManager | null>(() => {
-    if (id) return getDialogManager(id) ?? null;
+  const [dialogManager, setDialogManager] = useState<DialogManager>(() => {
+    if (id) {
+      const manager =
+        getDialogManager(id) ??
+        pendingDialogManagersById[id] ??
+        new DialogManager({ closeOnClickOutside, id });
+
+      pendingDialogManagersById[id] = manager;
+      return manager;
+    }
     return new DialogManager({ closeOnClickOutside }); // will not be included in the registry
   });
 
   useEffect(() => {
     if (!id) return;
-    setDialogManager(getOrCreateDialogManager({ closeOnClickOutside, id }));
+    const manager =
+      getDialogManager(id) ??
+      pendingDialogManagersById[id] ??
+      new DialogManager({ closeOnClickOutside, id });
+
+    if (typeof closeOnClickOutside === 'boolean') {
+      manager.closeOnClickOutside = closeOnClickOutside;
+    }
+
+    if (!getDialogManager(id)) {
+      dialogManagersRegistry.partialNext({ [id]: manager });
+    }
+    delete pendingDialogManagersById[id];
+
+    setDialogManager((prev) => (prev === manager ? prev : manager));
+    dialogManagerMountCountsById[id] = (dialogManagerMountCountsById[id] ?? 0) + 1;
+
     return () => {
+      const nextMountCount = (dialogManagerMountCountsById[id] ?? 1) - 1;
+      if (nextMountCount > 0) {
+        dialogManagerMountCountsById[id] = nextMountCount;
+        return;
+      }
+
+      delete dialogManagerMountCountsById[id];
       removeDialogManager(id);
-      setDialogManager(null);
     };
   }, [closeOnClickOutside, id]);
 
-  // temporarily do not render until a new dialog manager is created
-  if (!dialogManager) return null;
-
   return (
     <DialogManagerProviderContext.Provider value={{ dialogManager }}>
       {children}
@@ -172,7 +184,7 @@ export const useDialogManager = ({
 
         if (!managerInPrevState || managerInNewState?.id !== managerInPrevState.id) {
           setDialogManagerContext((prevState) => {
-            if (prevState?.dialogManager.id === managerInNewState?.id) return prevState;
+            if (prevState?.dialogManager === managerInNewState) return prevState;
             // fixme: need to handle the possibility that the dialogManager is undefined
             return {
               dialogManager: