AlertDialogAction should not override className of child

[tonyxiao]

<AlertDialogAction asChild>
  <Button
    disabled={ctx.alertMutation.isLoading}
    className="mr-auto"
    // Specifying asChild and using this variant does not appear to be
    // working for some reason...
    onClick={(e) => {
      ctx.alertMutation.mutate()
      // Prevent closing dialog until mutation finishes
      e.preventDefault()
    }}
    variant={'destructive'}>
    {ctx.alertMutation.isLoading && (
      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
    )}
    {ctx.alertDialogState.confirmText ?? 'Confirm'}
  </Button>
</AlertDialogAction>

The above code won't work, button will show up as default variant even though it is explicitly specified as destructive.

I modified AlertDialogAction to be the following. It works but would love some feedback on whether this is expected behavior.

const AlertDialogAction = React.forwardRef<
  React.ElementRef<typeof AlertDialogPrimitive.Action>,
  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
>(({className, ...props}, ref) => (
  <AlertDialogPrimitive.Action
    ref={ref}
    // When rendering asChild, we don't want to apply buttonVariants
    // because that would override child variants
    className={cn(!props.asChild && buttonVariants(), className)}
    {...props}
  />
))

[luvlaceeeee]

I have same problem https://github.com/shadcn/ui/issues/494

[luvlaceeeee]

By the way, to prevent the window from closing before the asynchronous operations are finished, you can declare a state inside the component with the window and control the window based on this state. To learn more, read the API here https://www.radix-ui.com/docs/primitives/components/alert-dialog#root

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.