-
- Notifications
You must be signed in to change notification settings - Fork 264
Description
Bug report
Current behavior
When a Dialog component is rendered inside NavigationMenu content, clicking anywhere in the dialog (including buttons and content) closes the dialog. This makes dialogs unusable within navigation menus.
I believe this is what is happening:
- Click event originates on dialog content
- Dialog's
useDismisssees this as an "inside" click - NavigationMenu's
useDismisssees this as an "outside" click - NavigationMenu closes, unmounting the dialog
Screen.Recording.2025-07-30.at.9.34.00.AM.mov
Additionally the clicks while the dialog is open pass through the dialog and hit the navigation. If the dialog is sitting on top of another submenu item with a dialog trigger it will open that dialog on top of the currently open dialog.
Screen.Recording.2025-07-30.at.11.09.53.AM.mov
For reference the experience I'm trying to build is a "leaving website" confirmation modal for external links in the navigation. It's a bit of a unique use case given nesting a dialog in a navigation isn't a common experience, but hopefully provides some context for the issue here.
Workaround
I've been able to sidestep this issue by creating a div in the menu and using the container prop on the Dialog.Portal to portal the dialog inside the navigation. This might be the correct way to handle nested scenarios like this since it appears to create a useDismiss hierarchy. Though it feels weird to force nesting the dialog; ideally from an architectural, accessibility, and reusable approach I'd love to keep this dialog portaled into the body.
Expected behavior
A nested dialog/alert dialog inside a navigation should be interact-able with its own context that is layered over the navigation. Once the dialog is either dismissed or closed the navigation context should then take back over.
Reproducible example
https://codesandbox.io/p/devbox/silly-jang-99qgsk?file=%2Fapp%2Fpage.tsx%3A165%2C8
Base UI version
^1.0.0-beta.1
Which browser are you using?
Chrome & Safari
Which OS are you using?
Mac OS
Additional context
These seem tangentially related but not specifically tied to the problem shown here.
#2312
#2195