shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
74.15k stars 4.58k forks source link

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

Open zwelhtetyan opened 1 month ago

zwelhtetyan commented 1 month ago

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

joseph0926 commented 1 month ago

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

iamolegga commented 1 month ago

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

zwelhtetyan commented 1 month ago

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

Not working for me

joseph0926 commented 1 month ago

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

zwelhtetyan commented 1 month ago

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 commented 1 month ago

@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 commented 1 month ago

@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 commented 1 month ago

@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 commented 1 month ago

<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 commented 1 month ago

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

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

eriknyk commented 2 weeks ago

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.

image

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.