How is the <AlertDialogAction /> meant to be used? I'm confused.

[florianmartens]

One of my favorite components in shadcn is the <AlertDialog />. But to this day, I don't know how it is meant to be used.

Obviously, it is meant to be paired with some form of action. Probably an async action. But the button just closes the dialog. It does not wait for any async action. Just closes the dialog without waiting for anything. So, attaching an onClick handler seems like a bad idea and instant memory leak

<AlertDialogAction onClick={() => sleep(10, callBackFnThatNeverGetsExecuted)}>Continue</AlertDialogAction>

When I first saw the <AlertDialogAction /> I thought it would be possible to register an action on the top-level dialog that returns a promise. When clicking the button, it would then wait for the promise to resolve and close. This would be great to allow the dialog to be uncontrolled too. But as of today:

• I'm not sure how to use the at all
• I've never been able to have an uncontrolled <AlertDialog />

Can someone tell me how this component is meant to be used and why the <AlertDialogAction /> exists?

Can't find anything in the radix or shad docs.

[anntnzrb]

AlertDialogAction auto-closes the dialog immediately on click (Radix UI design). For async operations, use controlled state:

const [open, setOpen] = useState(false)

const handleAction = async () => {
  await someAsyncOperation()
  setOpen(false) // Close only after completion
}

<AlertDialog open={open} onOpenChange={setOpen}>
  {/* ... */}
  <AlertDialogAction onClick={handleAction}>Continue</AlertDialogAction>
</AlertDialog>

The controlled open state overrides the automatic close behavior.