Dialoge is automatically getting hidden while using inside use of Dropdown Item

[jiaulislam]

Inside of a shadcn table I'm using Row Actions for do some action on row level. I have the component as below. I'm trying to use a Dialoge model component for action button to change password. But the Modal is visible for split seconds it's getting hide. Please help !

export function DataTableRowActions<TData>({
  row,
}: DataTableRowActionsProps<TData>) {
  const router = useRouter();

  const handleDeleteAction = () => {
    deleteUserAction(row.getValue("username"));
  };

  const handleEditAction = () => {
    router.push(`users/${row.getValue("username")}`);
  };

  const handleChangePasswordAction = () => {
    console.log(row.getValue("username"));
  };

  return (
    <DropdownMenu modal={false}>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
        >
          <DotsHorizontalIcon className="h-4 w-4" />
          <span className="sr-only">Open menu</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-[230px]">
        <DropdownMenuItem onClick={handleEditAction}>
          Edit
          <DropdownMenuShortcut>
            <FaUserEdit className="h-4 w-4 text-emerald-500" />
          </DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem onClick={handleDeleteAction}>
          Delete
          <DropdownMenuShortcut>
            <TiUserDelete className="h-4 w-4 text-red-500" />
          </DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <Dialog>
            <DialogTrigger asChild>
              <Button variant={null}>Edit Profile</Button>
            </DialogTrigger>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Are you absolutely sure?</DialogTitle>
                <DialogDescription>
                  This action cannot be undone. This will permanently delete
                  your account and remove your data from our servers.
                </DialogDescription>
              </DialogHeader>
            </DialogContent>
          </Dialog>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

[hosanxiv]

The Dialog is currently mounted inside DropdownMenuContent. Selecting the item closes the menu, which unmounts that entire subtree, including the Dialog root. Portaling DialogContent does not keep the root mounted.

Keep the dialog as a controlled sibling of the menu instead:

const [passwordOpen, setPasswordOpen] = React.useState(false)

return (
  <>
    <DropdownMenu modal={false}>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon">
          <DotsHorizontalIcon />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onSelect={() => setPasswordOpen(true)}>
          Change password
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>

    <Dialog open={passwordOpen} onOpenChange={setPasswordOpen}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Change password</DialogTitle>
        </DialogHeader>
        {/* form */}
      </DialogContent>
    </Dialog>
  </>
)

This is also the pattern used by shadcn's official Dropdown Menu with Dialog example.

[PrithwishDas101]

The issue is caused by the Dialog being mounted inside DropdownMenuItem. When the item is selected, Radix closes the dropdown and its content, which also unmounts the nested Dialog.

The cleanest solution is to move the Dialog outside the DropdownMenu and control its open state from the menu item.

For example:

const [dialogOpen, setDialogOpen] = React.useState(false)

return (
  <>
    <DropdownMenu modal={false}>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost">Open menu</Button>
      </DropdownMenuTrigger>

      <DropdownMenuContent>
        <DropdownMenuItem
          onSelect={() => setDialogOpen(true)}
        >
          Change password
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>

    <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Change password</DialogTitle>
          <DialogDescription>
            Update the user's password here.
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  </>
)

This way, selecting the menu item closes the dropdown normally, but the Dialog remains mounted independently and opens through its controlled state.

You can use the same pattern for Delete, Edit, Confirmation, and other dialogs triggered from row actions. It also avoids relying on nested overlay components sharing the same lifecycle.