fix(components): don't close dialog when interacting with a portalled dropdown (#2072)

Radix Select / Popover / DropdownMenu render their flyout into a portal at
document.body, outside the dialog DOM. Clicking an empty part of an open
dropdown in a create/edit form registered as an 'interact outside' and closed
the whole dialog.

MobileDialogContent now guards onInteractOutside: when the interaction's real
target is inside a Radix popper layer it is ignored (the popper dismisses
itself); a genuine backdrop click still closes the dialog. Logic is extracted
as isInsidePopperLayer with unit coverage.

Closes #2071

Author: baozhoutao

.changeset/dialog-popper-outside-close.md

@@ -0,0 +1,13 @@
+---
+'@object-ui/components': patch
+---
+
+fix(components): keep MobileDialogContent open when interacting with a portalled dropdown
+
+Radix Select / Popover / DropdownMenu render their flyout into a portal at
+`document.body`, outside the dialog's DOM. Clicking an empty part of an open
+dropdown registered as an "interact outside" and closed the entire dialog
+(create/edit forms). `MobileDialogContent` now guards `onInteractOutside`:
+interactions whose real target is inside a Radix popper layer are ignored
+(the popper dismisses itself), while a genuine backdrop click still closes the
+dialog as before.

packages/components/src/__tests__/mobile-dialog-content.test.tsx

@@ -0,0 +1,55 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * MobileDialogContent guards against a portalled dropdown closing the whole
+ * dialog. Radix Select / Popover render their flyout into a portal at
+ * `document.body` (outside the dialog DOM), so clicking empty space inside an
+ * open dropdown reads as an "interact outside" and used to dismiss the dialog.
+ * `isInsidePopperLayer` is the predicate that suppresses that case while
+ * leaving a genuine backdrop click (which still closes the dialog) untouched.
+ */
+
+import { describe, it, expect, afterEach } from 'vitest';
+import { isInsidePopperLayer } from '../custom/mobile-dialog-content';
+
+function mount(html: string): HTMLElement {
+  const host = document.createElement('div');
+  host.innerHTML = html;
+  document.body.appendChild(host);
+  return host;
+}
+
+afterEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('isInsidePopperLayer', () => {
+  it("treats a click inside a Radix popper wrapper as the dialog's own dropdown", () => {
+    const host = mount(
+      '<div data-radix-popper-content-wrapper><div role="listbox"><div id="opt">option</div></div></div>',
+    );
+    expect(isInsidePopperLayer(host.querySelector('#opt'))).toBe(true);
+  });
+
+  it('matches the select content / viewport variants too', () => {
+    const host = mount(
+      '<div data-radix-select-content><div data-radix-select-viewport><span id="item">x</span></div></div>',
+    );
+    expect(isInsidePopperLayer(host.querySelector('#item'))).toBe(true);
+    expect(isInsidePopperLayer(host.querySelector('[data-radix-select-content]'))).toBe(true);
+  });
+
+  it('does NOT match a genuine backdrop / outside-the-dropdown target', () => {
+    const host = mount('<div id="overlay" data-radix-dialog-overlay></div>');
+    expect(isInsidePopperLayer(host.querySelector('#overlay'))).toBe(false);
+  });
+
+  it('is null/undefined safe', () => {
+    expect(isInsidePopperLayer(null)).toBe(false);
+    expect(isInsidePopperLayer(undefined)).toBe(false);
+  });
+});

packages/components/src/custom/mobile-dialog-content.tsx

@@ -23,14 +23,48 @@ import { X } from 'lucide-react';
 import { cn } from '../lib/utils';
 import { DialogOverlay, DialogPortal } from '../ui/dialog';
 
+/**
+ * Radix Select / Popover / DropdownMenu render their flyout into a portal at
+ * `document.body` — physically OUTSIDE this DialogContent's DOM. So clicking an
+ * empty part of an open dropdown reads as an "interact outside" and would close
+ * the whole dialog. Suppress that: if the interaction's real target sits inside
+ * a Radix popper layer, keep the dialog open (the popper closes itself). A real
+ * backdrop click (target = overlay) is untouched and still closes the dialog.
+ */
+const POPPER_LAYER_SELECTOR =
+  '[data-radix-popper-content-wrapper],[data-radix-select-content],[data-radix-select-viewport]';
+
+/**
+ * True when `target` sits inside a Radix popper flyout (Select / Popover /
+ * DropdownMenu). Such elements are portalled to `document.body`, so an
+ * "interact outside" the dialog whose target is one of them is really an
+ * interaction with the dialog's own dropdown — it must not close the dialog.
+ */
+export function isInsidePopperLayer(target: Element | null | undefined): boolean {
+  return !!target?.closest?.(POPPER_LAYER_SELECTOR);
+}
+
 export const MobileDialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+>(({ className, children, onInteractOutside, ...props }, ref) => {
+  const handleInteractOutside = React.useCallback(
+    (event: Parameters<NonNullable<typeof onInteractOutside>>[0]) => {
+      const target = (event.detail?.originalEvent?.target ?? null) as Element | null;
+      if (isInsidePopperLayer(target)) {
+        event.preventDefault();
+        return;
+      }
+      onInteractOutside?.(event);
+    },
+    [onInteractOutside],
+  );
+  return (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
       ref={ref}
+      onInteractOutside={handleInteractOutside}
       className={cn(
         // Mobile-first: full-screen
         'fixed inset-0 z-50 w-full bg-background p-4 shadow-lg duration-200',
@@ -63,5 +97,6 @@ export const MobileDialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-));
+  );
+});
 MobileDialogContent.displayName = 'MobileDialogContent';