[bug]: AlertDialog and DropdownMenu Integration in Radix UI

[Romain-josepavel]

Describe the bug

Issue with AlertDialog and DropdownMenu Integration in Radix UI

When integrating an AlertDialog inside a DropdownMenu from Radix UI, you might encounter an issue where the AlertDialog doesn't close correctly. This can result in a scenario where the event pointer is stuck and empty, preventing the user from interacting with the page. The cause of this is that the DropdownMenu takes focus and prevents the AlertDialog from closing as expected.

Solution

To fix this, you need to set the modal={false} property on the Radix UI DropdownMenu component. This allows the DropdownMenu to function properly and ensures that the AlertDialog can close as intended when the user interacts with it.

Example

<DropdownMenu modal={false}>
  {/* Menu content */}
  <AlertDialog>
    {/* Alert dialog content */}
  </AlertDialog>
</DropdownMenu>

or

const DropdownMenu = ({ ...rest }) => (
  <DropdownMenuPrimitive.Root modal={false} {...rest} />
)

Suggestion

To prevent developers from running into this issue, it would be helpful to either set modal={false} by default in the integration of DropdownMenu with the AlertDialog, or to add this information to the official ShadCN documentation. This would help developers understand this behavior and avoid the issue without having to search for a solution.

Affected component/components

AlertDialogue, Dropdowm Menu

How to reproduce

Integrate an alert Dialogue into a dropdown menu.
open the dropdown menu
open the dialogue -> dropdown closing automatically
close the dialogue

Codesandbox/StackBlitz link

No response

Logs

System Info

Browers

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues