How would I nest Tooltip inside Alert Dialog? (getting error: Function components cannot be given refs)

[ben-xD]

I'm trying to add a tooltip to a button that triggers an alert. I'm using asChild to avoid extra components (button inside button, which would give a warning: Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.). If I remove asChild, it works. However, I'd have a triply nested button:

If I use asChild, when I put my button inside alert dialog inside tooltip, OR, my button inside tooltip inside alert dialog, I get the warning and the component doesn't work: Warning: Function components cannot be given refs..

Does anyone have any suggestions on having a single button and getting it working?

Warning

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `SlotClone`.

Code

import React from "react";
import { Button } from "@/components/ui/button.tsx";
import { RotateCw } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip.tsx";
import { TooltipPortal } from "@radix-ui/react-tooltip";

export const ActionButton = React.forwardRef<
  HTMLButtonElement,
  {
    title: string;
    onConfirm: () => void;
    isPending: boolean;
    confirmationDescription?: string;
  } & React.ButtonHTMLAttributes<HTMLButtonElement>
>(
  (
    { title, onConfirm, isPending, confirmationDescription, ...props },
    forwardedRef,
  ) => {
    const element = (
      <Button
        variant="secondary"
        ref={forwardedRef}
        className={cn(
          props.className,
          "flex items-center justify-between px-3 py-2",
        )}
        {...props}
      >
        {title}
        {isPending && <RotateCw className="w-4 animate-spin" />}
      </Button>
    );

    const withTooltip = (
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>{element}</TooltipTrigger>
          <TooltipPortal>
            <TooltipContent side={"top"}>
              <p>{props["aria-label"]}</p>
            </TooltipContent>
          </TooltipPortal>
        </Tooltip>
      </TooltipProvider>
    );

    const withAlertDialog = (
      <AlertDialog>
        <AlertDialogTrigger asChild>{withTooltip}</AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{props["aria-label"]}?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction aria-label="Continue" onClick={onConfirm}>
              Continue
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    );

    return withAlertDialog;
  },
);

[ben-xD]

Following https://www.radix-ui.com/primitives/docs/guides/composition, I ended up with:

import React from "react";
import { Button } from "@/components/ui/button.tsx";
import { RotateCw } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogPortal,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip.tsx";
import { TooltipPortal } from "@radix-ui/react-tooltip";

export const ActionButton = React.forwardRef<
  HTMLButtonElement,
  {
    title: string;
    onConfirm: () => void;
    isPending: boolean;
    confirmationDescription?: string;
  } & React.ButtonHTMLAttributes<HTMLButtonElement>
>(
  (
    { title, onConfirm, isPending, confirmationDescription, ...props },
    forwardedRef,
  ) => {
    return (
      <TooltipProvider>
        <AlertDialog>
          <Tooltip>
            <TooltipTrigger asChild>
              <AlertDialogTrigger asChild>
                <Button
                  variant="secondary"
                  ref={forwardedRef}
                  className={cn(
                    props.className,
                    "flex items-center justify-between px-3 py-2",
                  )}
                  {...props}
                >
                  {title}
                  {isPending && <RotateCw className="w-4 animate-spin" />}
                </Button>
              </AlertDialogTrigger>
            </TooltipTrigger>
            <TooltipPortal>
              <TooltipContent side={"top"}>
                <p>{props["aria-label"]}</p>
              </TooltipContent>
            </TooltipPortal>
          </Tooltip>

          <AlertDialogPortal>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>{props["aria-label"]}?</AlertDialogTitle>
                <AlertDialogDescription>
                  This action cannot be undone.
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction aria-label="Continue" onClick={onConfirm}>
                  Continue
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialogPortal>
        </AlertDialog>
      </TooltipProvider>
    );
  },
);