ui: confirming an alert dialog should close it

AlertDialogAction was a plain <Button> — only AlertDialogCancel wrapped the
primitive's Close — so confirming ran the action but never dismissed the
dialog. Found in Trippy, where "Clear conversation" cleared the chat and left
the modal sitting on screen; the same component is in every Crema app.

Delete-style dialogs hide it by accident: the row they act on unmounts out from
under the open dialog and takes it with it. Any confirm that leaves its target
on screen (a rewrite, a regenerate, a clear) just gets stuck.

Fixed at the component, so every call site gets it. The action still runs —
Base UI merges its own close handler with the caller's onClick — and async work
carries on behind the closed dialog.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
jules
2026-07-14 14:58:33 +10:00
parent 3fcdddefda
commit f5a994e1d8
2 changed files with 79 additions and 2 deletions

View File

@@ -141,14 +141,24 @@ function AlertDialogDescription({
)
}
// Confirming closes the dialog, exactly as cancelling does. This was a plain
// <Button>, so the dialog stayed open after you confirmed — every call site
// already assumed otherwise, and the ones that looked fine only did because
// the thing they acted on (a row, a card) unmounted underneath them. The
// handler still runs: Base UI merges its close handler with the caller's
// onClick, so async work carries on behind the closed dialog.
function AlertDialogAction({
className,
variant = "default",
size = "default",
...props
}: React.ComponentProps<typeof Button>) {
}: AlertDialogPrimitive.Close.Props &
Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
return (
<Button
<AlertDialogPrimitive.Close
data-slot="alert-dialog-action"
className={cn(className)}
render={<Button variant={variant} size={size} />}
{...props}
/>
)