Criei uma ação em que mostrará um menu e tenho uma função em que, se o usuário optar por excluir, mostrará um aviso de alerta antes de continuar, mas o problema que estou encontrando agora é quando clico no menu, o modal será aberto, mas fechará imediatamente. Eu estava supondo que ele fecha porque o menu fecha depois de ser clicado.
import Image from 'next/image';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Trash2 } from 'lucide-react';
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
export default function Home() {
return (
<div>
<DropdownMenu>
<DropdownMenuTrigger>Open</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
<Trash2 className="mr-2 h-4 w-4" />
<AlertDialog>
<AlertDialogTrigger>Open</AlertDialogTrigger>
<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>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
}
Eu criei uma amostra, amostra real
O motivo é que não funciona: o conteúdo da caixa de diálogo é definido dentro do item de menu. quando você clica no item de menu, ele renderiza a caixa de diálogo por uma fração de segundo, mas o menu está sendo removido do DOM e o conteúdo da caixa de diálogo, pois seu filho também está sendo removido do DOM.
A maneira mais simples de corrigir isso no seu caso é agrupar o item de menu na caixa de diálogo de alerta e mover o conteúdo da caixa de diálogo do item de menu, assim: