Proper usage of forwardRef to allow Tooltip on custom component

[steabert]

I tried to make a wrapper component for a badge, but when doing so my tooltip around the badge stopped working.

Works:

<Tooltip relationship="description" content="hello">
  <Badge>text</Badge>
</Tooltip>

Fails (no tooltip shown on hover):

const Test = React.forwardRef((_props, ref: React.Ref<HTMLDivElement>) => {
  return <Badge ref={ref}>test</Badge>
})

<Tooltip relationship="description" content="hello">
  <Test />
</Tooltip>

It feels like there must be something obvious that I'm missing?

[steabert]

I got some help and it seems one needs to forward all (other) props as well to make it work:

const Test = React.forwardRef(({myProps, ...otherProps}, ref: React.Ref<HTMLDivElement>) => {
  return <Badge {...otherProps} ref={ref}>test</Badge>
})

[steabert]

It would be nice if there was some documentation on the tooltip docs to explain what props/ref is needed for it to work with custom components.