ToggleGroup.Item `asChild` does not work for custom components missing ref forwarding

Bug report

Using ToggleGroup.Item and padding a custom component will result in a TypeError when focusing to ToggleGroup with the keyboard.

TypeError: Cannot read properties of null (reading 'focus')

Current Behavior

Here is a stackblitz with the issue. Using tab to focus the first ToggleGroup works fine, but the second ToggleGroup results in a TypeError. All ToggleGroup.Item components use the asChild prop. The first group has a <button /> element as the child, and the second group items have a custom component as a child.

https://user-images.githubusercontent.com/33156025/166530302-29947a41-70c8-431d-8f48-61d60a8a41ae.mov

Expected behavior

I would like to be able to use custom components as children to the ToggleGroup.Item component with the asChild prop.

Reproducible example

stackblitz. In the repro, I use the Styled in the component names to represent custom components that are likely to be used in a production application. Yes, they are missing custom styles, but this is the same component hierarchy used in prod apps. Thanks for understanding!

Suggested solution

Haven’t looked too deeply into the source code surrounding this issue. Right now the only workaround is to not use asChild.

Additional context

N/A. Please request if needed. Happy to help.

Your environment

Local env. Different from stackblitz. Issue is in both envs.

Software	Name(s)	Version
Radix Package(s)	react-toggle-group	0.1.5
React	n/a	17.0.2
Browser	Chrome	100.0.4896.127
Assistive tech	n/a
Node	n/a
npm/yarn	npm	8.1.3
Operating System	macOS Monterey	12.3.1

Thanks for the awesome work!

[charkour]

Thanks! I see what you’re saying. And yes, my team right now prefers to use that first API. We’ll see how the other one fairs.

Thanks again for taking the time to thoroughly review this non-issue. Cheers!

[benoitgrelard]

asChild can be used to change the semantic element too. I guess it’s probably a preference thing, effectively you want this:

<StyledItem As={MyStyledButton}>One</StyledItem>

over this:

<ToggleGroup.Item asChild>
  <MyStyledButton>One</MyStyledButton>
</ToggleGroup.Item>

They both work, I’m just not sure how much the extra abstraction is warranted. With the extra StyledItem, it’s an extra component you need to remember to forward props/ref.

Perhaps this is also a contrived example and in reality your StyledItem is more than what I see here too.

✌️