ENG-1156 AccordionItem does not forward ref

can you give more context , as i am not getting this error

Are you able to forward ref to AccordionItems? Will try to recreate the issue in a sandbox 👍

Here is a stack blitz: https://stackblitz.com/edit/stackblitz-starters-yxjqtp?file=app%2Fpage.tsx

Not sure why it fails to render the accordion (rendering a button works), but I don't care about what it renders. The issue is that AccordionItems is not taking a ref parameter.

This is an issue with the underlying aria component library, as their SelectItem component does not expose ref for some reason, unlike the ListboxItem which does.

I see. Was it reported by someone from nextui team to the aria team?

@AnthonyPaulO any news on this? I've seen that the AccordionItem is using a button, so not sue what SelectItem has to do with this issue.

@AnthonyPaulO any news on this? I've seen that the AccordionItem is using a button, so not sue what SelectItem has to do with this issue.

AccordionItem itself is a SelectItem behind the scenes, which is an Adobe Aria library component, and it does not expose a ref property. I'm not really a maintainer here so I don't have any relationship with the Aria team, but I guess I could post it as an issue on their site. I'll do that.

Thanks, as you have more insights into how it works! 🙏🏻

Thanks, as you have more insights into how it works! 🙏🏻

I created the issue here: adobe/react-spectrum#6949

Okay never mind, I must have confused this with another issue so I closed the adobe react issue I created.

After a lot of digging and debugging, the real cause of the ref not working is that it's being wiped out in the useTreeState call in use-accordion.ts. Apparently the Accordion's children are cloned and passed into useTreeState and become a managed collection. This collection is then iterated over to create the individual AccordionItem elements, but the ref of each child in the collection had been stripped out during the useTreeState call so it never gets passed on.

This also occurs in ListBox via the useListState call, so those children can't have refs either, and a quick check shows it's not even implemented though it would be a quick thing to do. I presume all other components with children that use React Stately useXXXState methods suffer from the same ref-stripping issues.

I don't think useTreeState is at fault here, we use that hook for our Menu and I can see our ref is maintained
https://codesandbox.io/p/sandbox/s6rs79

One of these is likely missing passing the ref along:

Feel free to have a look through our source for more ideas.