Dialog triggered from Dropdown in a table makes screen unclickable

[zhadavi]

I have a Dialog triggered by an item in a DropdownMenu. This is rendered in a TanStack table as part of an "actions" column. The Dialog and menu open correctly, but when the Dialog is closed, the entire application becomes unresponsive and nothing is able to be clicked or hovered anymore. In other words, it seems like the modal non-interactivity remains even after closing.

This same code works in other parts of my codebase but only seems to break when using this in a TanStack table column. Has anyone ran into this issue before or have any ideas?

function Dropdown({children}) {
  const [dialogOpen, setDialogOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
      <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
        <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
        <DropdownMenuContent>
          <DialogTrigger asChild>
            <DropdownMenuItem>Edit</DropdownMenuItem>
          </DialogTrigger>
        </DropdownMenuContent>
      </DropdownMenu>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>This is the title</DialogTitle>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
}

export const columns: ColumnDef[] = [
  {
    id: "actions",
    cell: ({ row }) => {
      return (
        <Dropdown>
          <Button
            variant="ghost"
            size="icon"
            className="h-6 w-6"
          >
            <VerticalDots
              className="h-4 w-4 text-muted-foreground"
            />
          </Button>
        </Dropdown>
      );
    },
  },
];

[siddiquiaffan]

Hey @zhadavi did you find any solution?

[nesschenes]

Have you tried adding modal={false} at DropdownMenu?
such as: <DropdownMenu modal={false}>

I solved the same issue in my project with: issue-1912

[coding-somewhere]

adding modal={false} to the DropdownMenu works for me.

[christiannaths]

This is the way ❤️