[Bug]: Menu.Items not forwarding ref

[petercpwong]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

1.4.1

What browser are you using?

Chrome

Reproduction repository

https://codesandbox.io/s/little-fog-bygcn

Describe your issue

As demonstrated in the codesandbox above, the ref prop is not being forwarded to the container element in Menu.Items.

[brvnonascimento]

Same with Tab.List component

[jaredloson]

Are refs forwarded to any of the components? Running into the with Tabs as well.

[gchartier]

Any update on this? I'm also running into this with Menu.Items. Trying to use another component as the Menu.Items.

[RobinMalfait]

We will make sure that all components are forwarding the ref correctly. I'm, going to close this issue because the Menu.Items already does that. I also can't open de codesandbox it gives me an error.

@gchartier if you are using a custom component like <Menu.Items as={CustomComponent} /> then you have to make sure that your CustomComponent forwards the ref correctly.

[petercpwong]

@RobinMalfait Sorry I accidentally deleted the codesandbox a while ago. It's back up now.

[RobinMalfait]

@petercpwong no worries, the ref is set correctly and also works in the example. The issue you are seeing is because a ref is an object with a current property and console.log calls are async. This means that the moment you click, we unmount the Menu.Items and once it flushes to the console it is set to null already.

If you use console.log(containerRef.current) instead then you will see the actual DOM node being logged. However, if you right click in chrome on the logged value and click "Focus in elements panel" then you will notice that the DOM node is already gone, similar to what you saw with the initial null value.

[petercpwong]

@RobinMalfait You're right. Just updated the codesandbox and can confirm it works as expected. Thanks for looking into this.