Using forwardRef under a Popover.Trigger

[samselikoff]

Hi!

I'm having trouble using a custom component with forwardRef under a Popover.Trigger. First time doing this with this lib so would appreciate if anybody can point me in the right direction!

Here's the repo:

https://github.com/samselikoff/2023-02-07-radix-popover-child-component

And here's the Stackblitz:

https://stackblitz.com/github/samselikoff/2023-02-07-radix-popover-child-component?file=pages%2Findex.tsx

If you comment out my custom <Button> you'll see everything works. For some reason I can't get the ref forwarding to take!

[joaom00]

Hi @samselikoff,

You should forward all props too

const Button = forwardRef(function Button(
  { children, ...props }: { children: ReactNode },
  ref
) {

  return (
    <button {...props} className="foo" ref={ref}>
      {children}
    </button>
  );
});

[benoitgrelard]

Yep, as @joaom00 pointed out, you need to make sure your button accepts handlers that will be added to it by Popover.Trigger to open the trigger using pointer/keyboard, but also accept data attributes, aria attributes, etc. The easiest way to do that without having to specifically list out these is to spread all the props coming in, which makes sense anyway for leaf components like buttons in a design system.

[samselikoff]

Makes sense! Thanks both for the answer!

Follow-up, is it possible to get types for the ...props? I'm using props.onClick in a Framer Motion hook and feel like that's kinda reaching into private API 🤔

[benoitgrelard]

If you mean for your case above, the type of props would be:

React.ComponentProps<'button'>

[samselikoff]

I actually mean the specific forwarded props from the Popover.Trigger. It would be nice to know which props are forwarded – not sure if that's possible?

Also for the props in the above case if I wanted all of them, wouldn't it be ComponentPropsWithoutRef<'button'>, since I'm using forwardRef?

[benoitgrelard]

I actually mean the specific forwarded props from the Popover.Trigger. It would be nice to know which props are forwarded – not sure if that's possible?

Ah I see sorry! No that's not possible, in an ideal world, TS would moan if you asChild and the direct child doesn't have the necessary stuff, or the right signature, but as far as we know that isn't possible with TS at the moment.

Also for the props in the above case if I wanted all of them, wouldn't it be ComponentPropsWithoutRef<'button'>, since I'm using forwardRef?

Yep, that's correct. That's how we extend all our primitives internally too.

[samselikoff]

Makes sense. Thanks for all the info + awesome work on this lib! 🙏