[dialog] Fix nested-dialog counts and dismissal edge cases

- Aggregate nested dialog/drawer counts per child (keyed by a stable id, via
  Math.max) so closing one sibling no longer zeroes the parent while another
  stays open, which also fixes Escape/outside-press topmost gating (B4).
- Accept touchend outside-press by counting changedTouches instead of the now-empty
  touches list (B6).
- Seed store state directly on first render instead of store.update() so detached
  trigger subscribers aren't notified mid-render (B7).
- Seed a reused handle store's openProp on first render so an initially-open
  dialog doesn't play an enter transition (B8).
- Report the trigger on close using the triggerIdProp-aware selector (B9).
- Add a nested sibling-close regression test.

Author: atomiks

packages/react/src/dialog/root/DialogRoot.test.tsx

@@ -1445,6 +1445,66 @@ describe('<Dialog.Root />', () => {
       expect(outsideAfter).not.toHaveFocus();
     },
   );
+
+  it.skipIf(isJSDOM)(
+    'keeps the parent nested-dialog state when one of two sibling nested dialogs closes',
+    async () => {
+      function NestedSiblings() {
+        return (
+          <Dialog.Root modal={false}>
+            <Dialog.Trigger>Open parent</Dialog.Trigger>
+            <Dialog.Portal>
+              <Dialog.Popup data-testid="parent-popup">
+                <Dialog.Root modal={false} disablePointerDismissal>
+                  <Dialog.Trigger>Open A</Dialog.Trigger>
+                  <Dialog.Portal>
+                    <Dialog.Popup data-testid="popup-a">Dialog A</Dialog.Popup>
+                  </Dialog.Portal>
+                </Dialog.Root>
+                <Dialog.Root modal={false} disablePointerDismissal>
+                  <Dialog.Trigger>Open B</Dialog.Trigger>
+                  <Dialog.Portal>
+                    <Dialog.Popup data-testid="popup-b">
+                      <Dialog.Close>Close B</Dialog.Close>
+                    </Dialog.Popup>
+                  </Dialog.Portal>
+                </Dialog.Root>
+              </Dialog.Popup>
+            </Dialog.Portal>
+          </Dialog.Root>
+        );
+      }
+
+      const { user } = await render(<NestedSiblings />);
+
+      await user.click(screen.getByRole('button', { name: 'Open parent' }));
+      const parentPopup = await screen.findByTestId('parent-popup');
+
+      await user.click(screen.getByRole('button', { name: 'Open A' }));
+      await screen.findByTestId('popup-a');
+
+      await user.click(screen.getByRole('button', { name: 'Open B' }));
+      await screen.findByTestId('popup-b');
+
+      // Both siblings are open, so the parent reflects an open nested dialog.
+      expect(parentPopup).toHaveAttribute('data-nested-dialog-open');
+
+      // Closing sibling B must not zero the parent's count while sibling A stays open.
+      await user.click(screen.getByRole('button', { name: 'Close B' }));
+      await waitFor(() => {
+        expect(screen.queryByTestId('popup-b')).toBe(null);
+      });
+
+      expect(parentPopup).toHaveAttribute('data-nested-dialog-open');
+
+      // The parent is not topmost (A is still open), so Escape closes A, not the parent.
+      await user.keyboard('[Escape]');
+      await waitFor(() => {
+        expect(screen.queryByTestId('popup-a')).toBe(null);
+      });
+      expect(screen.queryByTestId('parent-popup')).not.toBe(null);
+    },
+  );
 });
 
 function DialogOpenChangeSpy(props: {

packages/react/src/dialog/root/useDialogRoot.ts

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { useScrollLock } from '@base-ui/utils/useScrollLock';
 import { EMPTY_OBJECT } from '@base-ui/utils/empty';
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { mergeProps } from '../../merge-props';
 import { useDismiss } from '../../floating-ui-react';
 import { contains, getTarget } from '../../floating-ui-react/utils';
@@ -17,6 +18,14 @@ import {
   usePopupRootSync,
 } from '../../utils/popups';
 
+// Process-local counter for identifying nested dialogs when reporting counts to a parent.
+// This id is never rendered to the DOM, so it doesn't need to be SSR-stable.
+let nestedDialogIdCounter = 0;
+function getNextNestedDialogId() {
+  nestedDialogIdCounter += 1;
+  return `nested-dialog-${nestedDialogIdCounter}`;
+}
+
 export function useDialogRoot(params: UseDialogRootParameters): UseDialogRootReturnValue {
   const { store, parentContext, actionsRef, isDrawer } = params;
 
@@ -95,7 +104,9 @@ export function DialogInteractions({
       if ('button' in event && event.button !== 0) {
         return false;
       }
-      if ('touches' in event && event.touches.length !== 1) {
+      // On `touchend`, `touches` is empty because the finger has lifted, so count
+      // the touch points from `changedTouches` instead.
+      if ('changedTouches' in event && event.changedTouches.length !== 1) {
         return false;
       }
 
@@ -122,34 +133,59 @@ export function DialogInteractions({
 
   useScrollLock(open && modal === true, popupElement);
 
+  // Each direct child dialog reports the deepest open count in its own subtree,
+  // keyed by a stable id. Aggregating with `Math.max` (rather than letting the
+  // last reporter overwrite) keeps the counts correct when sibling dialogs open
+  // and close independently: a closing sibling no longer zeroes the parent's
+  // count while another sibling stays open.
+  const nestedDialogId = useRefWithInit(getNextNestedDialogId).current;
+  const nestedChildContributionsRef = useRefWithInit(
+    () => new Map<string, { dialogs: number; drawers: number }>(),
+  );
+
+  function recomputeNestedCounts() {
+    let dialogs = 0;
+    let drawers = 0;
+    nestedChildContributionsRef.current.forEach((contribution) => {
+      dialogs = Math.max(dialogs, contribution.dialogs);
+      drawers = Math.max(drawers, contribution.drawers);
+    });
+    setOwnNestedOpenDialogs(dialogs);
+    setOwnNestedOpenDrawers(drawers);
+  }
+
   // Listen for nested open/close events on this store to maintain the counts.
-  store.useContextCallback('onNestedDialogOpen', (dialogCount, drawerCount) => {
-    setOwnNestedOpenDialogs(dialogCount);
-    setOwnNestedOpenDrawers(drawerCount);
+  store.useContextCallback('onNestedDialogOpen', (childId, dialogCount, drawerCount) => {
+    nestedChildContributionsRef.current.set(childId, {
+      dialogs: dialogCount,
+      drawers: drawerCount,
+    });
+    recomputeNestedCounts();
   });
 
-  store.useContextCallback('onNestedDialogClose', () => {
-    setOwnNestedOpenDialogs(0);
-    setOwnNestedOpenDrawers(0);
+  store.useContextCallback('onNestedDialogClose', (childId) => {
+    nestedChildContributionsRef.current.delete(childId);
+    recomputeNestedCounts();
   });
 
   // Notify parent of our open/close state using parent callbacks, if any
   React.useEffect(() => {
     if (parentContext?.onNestedDialogOpen && open) {
       parentContext.onNestedDialogOpen(
+        nestedDialogId,
         ownNestedOpenDialogs + 1,
         ownNestedOpenDrawers + (isDrawer ? 1 : 0),
       );
     }
     if (parentContext?.onNestedDialogClose && !open) {
-      parentContext.onNestedDialogClose();
+      parentContext.onNestedDialogClose(nestedDialogId);
     }
     return () => {
       if (parentContext?.onNestedDialogClose && open) {
-        parentContext.onNestedDialogClose();
+        parentContext.onNestedDialogClose(nestedDialogId);
       }
     };
-  }, [isDrawer, open, ownNestedOpenDialogs, ownNestedOpenDrawers, parentContext]);
+  }, [isDrawer, open, ownNestedOpenDialogs, ownNestedOpenDrawers, parentContext, nestedDialogId]);
 
   const activeTriggerProps = dismiss.reference ?? EMPTY_OBJECT;
   const inactiveTriggerProps = dismiss.trigger ?? EMPTY_OBJECT;

packages/react/src/dialog/root/useRenderDialogRoot.tsx

@@ -42,19 +42,30 @@ export function useRenderDialogRoot<Payload>(
     ...rootState,
   });
 
-  // Support initially open state when uncontrolled
   useOnFirstRender(() => {
-    const nextState =
-      openProp === undefined && store.state.open === false && defaultOpen === true
-        ? { open: true, activeTriggerId: defaultTriggerIdProp }
-        : null;
+    // Support initially open state when uncontrolled.
+    const shouldOpen = openProp === undefined && store.state.open === false && defaultOpen === true;
+    // A reused handle store isn't seeded with `openProp` from `initialState` (the handle
+    // is created before the Root knows the prop). Seed it during the first render so the
+    // open selector reflects the controlled value immediately; otherwise an initially-open
+    // dialog would flip from closed to open after the first paint and play an unwanted
+    // enter transition (`useTransitionStatus`).
+    const shouldSeedOpenProp = openProp !== undefined && store.state.openProp !== openProp;
 
-    if (isAlertDialog) {
-      // Handles can reuse plain Dialog stores; alert dialog invariants must exist immediately.
-      store.update(nextState ? { ...rootState, ...nextState } : rootState);
-    } else if (nextState) {
-      store.update(nextState);
+    if (!isAlertDialog && !shouldOpen && !shouldSeedOpenProp) {
+      return;
     }
+
+    // Assign `store.state` directly instead of calling `store.update` (which notifies
+    // synchronously). This runs during render, so notifying detached-trigger subscribers
+    // here would update other components mid-render.
+    store.state = {
+      ...store.state,
+      // Handles can reuse plain Dialog stores; alert dialog invariants must exist immediately.
+      ...(isAlertDialog ? rootState : null),
+      ...(shouldSeedOpenProp ? { openProp } : null),
+      ...(shouldOpen ? { open: true, activeTriggerId: defaultTriggerIdProp } : null),
+    };
   });
 
   store.useControlledProp('openProp', openProp);

packages/react/src/dialog/store/DialogStore.ts

@@ -31,8 +31,10 @@ type Context = PopupStoreContext<DialogRoot.ChangeEventDetails> & {
   readonly backdropRef: React.RefObject<HTMLDivElement | null>;
   readonly internalBackdropRef: React.RefObject<HTMLDivElement | null>;
   readonly outsidePressEnabledRef: React.MutableRefObject<boolean>;
-  readonly onNestedDialogOpen?: ((dialogCount: number, drawerCount: number) => void) | undefined;
-  readonly onNestedDialogClose?: (() => void) | undefined;
+  readonly onNestedDialogOpen?:
+    | ((nestedId: string, dialogCount: number, drawerCount: number) => void)
+    | undefined;
+  readonly onNestedDialogClose?: ((nestedId: string) => void) | undefined;
 };
 
 const selectors = {
@@ -87,10 +89,16 @@ export class DialogStore<Payload> extends ReactStore<
       this.set('preventUnmountingOnClose', true);
     };
 
-    if (!nextOpen && eventDetails.trigger == null && this.state.activeTriggerId != null) {
+    // Use the `triggerIdProp`-aware selector so fully controlled mode (`open` + `triggerId`
+    // props) reports the trigger on close, matching the uncontrolled flow.
+    const activeTriggerId = this.select('activeTriggerId');
+    if (!nextOpen && eventDetails.trigger == null && activeTriggerId != null) {
       // When closing the dialog, pass the old trigger to the onOpenChange event
       // so it's not reset too early (potentially causing focus issues in controlled scenarios).
-      eventDetails.trigger = this.state.activeTriggerElement ?? undefined;
+      eventDetails.trigger =
+        this.state.activeTriggerElement ??
+        (this.context.triggerElements.getById(activeTriggerId) as Element | undefined) ??
+        undefined;
     }
 
     this.context.onOpenChange?.(nextOpen, eventDetails as DialogRoot.ChangeEventDetails);