[bug]: Can't open DropdownMenu when using with AlertDialog together

[zwelhtetyan]

Describe the bug

export default function Test() {
  const [open, setOpen] = useState(false);

  return (
    <div className="p-20">
      <DropdownMenu>
        <DropdownMenuTrigger>Open</DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuLabel>My Account</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem>Profile</DropdownMenuItem>
          <DropdownMenuItem>Billing</DropdownMenuItem>
          <DropdownMenuItem>Team</DropdownMenuItem>
          <DropdownMenuItem>Subscription</DropdownMenuItem>
          <Button onClick={() => setOpen(true)}>open dialog</Button> // open dialog 
        </DropdownMenuContent>
      </DropdownMenu>

      <AlertDialog open={open}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete your
              account and remove your data from our servers.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={() => setOpen(false)}> // close dialog
              Cancel
            </AlertDialogCancel>
            <AlertDialogAction>Continue</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}

Can't open DropdownMenu again after closing AlertDialog

Affected component/components

DropdownMenu, AlertDialog

How to reproduce

---

Codesandbox/StackBlitz link

https://codesandbox.io/p/sandbox/shadcnui-issue-44hxn3

Logs

No response

System Info

---

Before submitting

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

[joseph0926]

The codesandbox link is invalid I go in but there is no code for shadcn

[iamolegga]

same scenario, solved with <AlertDialog open={open} onOpenChange={setOpen}>

[zwelhtetyan]

same scenario, solved with <AlertDialog open={open} onOpenChange={setOpen}>

Not working for me

[joseph0926]

In the modified code sandbox, the “dropdown-menu” seems to work normally after the “alert-dialog” is closed Is this not the problem?

[zwelhtetyan]

In the modified code sandbox, the “dropdown-menu” seems to work normally after the “alert-dialog” is closed Is this not the problem?

I found it a bit tricky to add tailwind and shadcn config in sandbox. So this is not the complete version. It is not working with overlay styling in the original version.

[anubhavadarsh]

@zwelhtetyan , I tried reproducing the said issue in my local build. I am able to open "dropdown-menu", after the "alert-dialog" has been closed. I have attached a video for the said behavior as well. https://github.com/user-attachments/assets/06f7e5d8-1e51-4c9d-9d21-76abfc9bc673

[zwelhtetyan]

@zwelhtetyan , I tried reproducing the said issue in my local build. I am able to open "dropdown-menu", after the "alert-dialog" has been closed. I have attached a video for the said behavior as well. https://github.com/user-attachments/assets/06f7e5d8-1e51-4c9d-9d21-76abfc9bc673

How you handle opening alert dialog? State or trigger button?

[anubhavadarsh]

@zwelhtetyan , I tried reproducing the said issue in my local build. I am able to open "dropdown-menu", after the "alert-dialog" has been closed. I have attached a video for the said behavior as well. https://github.com/user-attachments/assets/06f7e5d8-1e51-4c9d-9d21-76abfc9bc673

How you handle opening alert dialog? State or trigger button?

I used states, it was the same code you shared with the bug description.

[Char99s]

<AlertDialogCancel onClick={(e) => {e.preventDefault(); setOpen(false)}}>

Try using e.preventDefault() as shown above because I encountered the same error and the dropdown menu was initially closing with the dialog since you clicked outside of it.

[KoenRijpstra]

Fix the issues by updating @radix-ui/react-alert-dialog to version 1.1.2

npm install @radix-ui/react-alert-dialog@latest

[eriknyk]

I've faced the same issue in a recent app, I recently added the alert-dialog component, it's already using the v1.1.2 of @radix-ui/react-alert-dialog and the problem still occurs. I've noticed that when the dialog is closed it is adding a style="pointer-events: none;" property to thml body tag and it's blocking the pointer event on the entire page.

I'm pretty sure that it's being added after close the dialog because I've monitored on devtools elements tab, and if you remove that style prop manually (from devtools elements tab) the page backs to normal.

[davidfcopozo]

I've faced the same issue in a recent app, I recently added the alert-dialog component, it's already using the v1.1.2 of @radix-ui/react-alert-dialog and the problem still occurs. I've noticed that when the dialog is closed it is adding a style="pointer-events: none;" property to thml body tag and it's blocking the pointer event on the entire page.

I'm pretty sure that it's being added after close the dialog because I've monitored on devtools elements tab, and if you remove that style prop manually (from devtools elements tab) the page backs to normal.

I'm having the same issue, the only workaround I could think about is to set the pointer-events to auto with the !important modifier, I'm sure is not the best solution, but if anybody has a more optimum solution, please let me know.