AlertDialog for deletesAlertDialog for deletes

One delete button, two dialogs

Open each, then click outside, press Escape, or press Enter.

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete project</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete “acme-web”?</AlertDialogTitle>
      <AlertDialogDescription>
        Its 3 deployments and 2 domains go with it. This can’t be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction onClick={deleteProject}>Delete project</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

The hasty keyboard run

Press Run, then move AlertDialog focus to Delete.

const [target, setTarget] = useState<Project | null>(null)

<DropdownMenuItem variant="destructive" onSelect={() => setTarget(project)}>
  Delete
</DropdownMenuItem>

<AlertDialog open={target !== null} onOpenChange={(open) => !open && setTarget(null)}>
  <AlertDialogContent>
    <AlertDialogHeader>…</AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel> {/* focused on open */}
      <AlertDialogAction onClick={() => remove(target.id)}>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Why it matters, pros and cons