ui: Page becomes unresponsive after closing a modal

I want a dropdown-menu with two options: delete and edit, When the user selects an option, a popover will show to confirm his selection. I know we shouldn’t put the dialog inside the dropdown menu other wise the popover will not even be vissible on the page, but I also had another issue: the page becomes unresponsive after a modal is closed. This is a video of the issue; the code is copied from the examples/playground page, where it functions properly. i have this probleme only when when the modal is opened from a dropdown thanks yall

https://github.com/shadcn-ui/ui/assets/93702837/287bc707-df04-4831-a31c-f25e9e3a3ddf

About this issue

Original URL
State: closed
Created 8 months ago
Reactions: 2
Comments: 15

Most upvoted comments

This issue is still present, and manually managing state is not a viable solution imo.

thvozdovic on Feb 25, 2024

hi all,

I just found a solution: https://github.com/radix-ui/primitives/issues/837#issuecomment-1455160154

here’s a example of shadcn-ui:

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">
      <span className="sr-only">Actions</span>
      <MoreHorizontal className="h-4 w-4" />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <AlertDialog
      open={showDeleteDialog}
      onOpenChange={setShowDeleteDialog}
    >
      <AlertDialogTrigger asChild>
        <DropdownMenuItem
          className="text-red-600"
          onSelect={(event) => {
            event.preventDefault();
            setShowDeleteDialog(true);
          }}
        >
          <Trash className="mr-2 h-4 w-4" />
          Delete
        </DropdownMenuItem>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. The document will no longer be
            accessible by you or others you&apos;ve shared it with.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <Button
            variant="destructive"
            onClick={() => {
              deleteSelectedFiles();
              setShowDeleteDialog(false);
            }}
          >
            Delete
          </Button>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  </DropdownMenuContent>
</DropdownMenu>

Two main points:

have event.preventDefault(); in the DropdownMenuItem. This actually prevents the dialog closing due to the dropdown menu closing.
Wrap AlertDialog in DropdownMenuContent

stimw on Nov 24, 2023