Unable to use a custom component as a child with Tooltip.Trigger's asChild prop

[sdnts]

Hey there! I'm trying to create a custom Tooltip API using the example In the docs

It works as-is, but as soon as I replace the native <button /> with a custom <Button />, the tooltip stops showing up. Here's a little repro: https://codesandbox.io/s/bold-mirzakhani-xgjfl7?file=/App.js (Let me know if anything needs clarification!)

I did some investigation, and it looks like removing the asChild prop from the ToooltipPrimitive.Trigger (in Tooltip.jsx) fixes the problem, but then of course I see a DOM nesting validation error.

I think this is a bug, but I wanted to create a discussion first in case this is known / I misconfigured something. Thanks!

[jjenzz]

If you spread the Button props onto the button, it will work https://codesandbox.io/s/reverent-bohr-xqrxpd?file=/App.js

[sdnts]

Oh awesome, thank you!

[MatchuPitchu]

I have the same problem with the HoverCardRadix.Trigger. But here the spreading does not solve the problem.

Solution: forwardRef is needed, then it's working.

// simplified example
type Badge = ComponentPropsWithoutRef<typeof Badge> // it's a `span` element with some custom properties

export const Badge = (props: BadgeProps) => {
  return (
    <Badge  {...props}>
      {children}
    </Badge>
  )
}

type HoverCardTriggerProps = ComponentPropsWithoutRef<typeof HoverCardRadix.Trigger>

export const HoverCardTrigger = ({ children, ...restProps }: HoverCardTriggerProps) => {
  return (
    <HoverCardRadix.Trigger asChild {...restProps}>
      <Badge />
    </HoverCardRadix.Trigger>
  )
}

[jjenzz]

indeed :) for anyone else that comes here there is a bunch of information about requirements here including info about forwardRef