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>
      );
    },
  },
];