Menu.Item with class component crashes with "Failed to execute 'compareDocumentPosition'"

[kevinwilde]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

For example: v1.6.0

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/s/headlessui-react-menu-example-forked-d79l6j?file=/src/App.js

Describe your issue

When the children prop of a Menu.Item is a class component or a function which returns a class component, opening the menu causes a crash with

Failed to execute 'compareDocumentPosition' on 'Node': parameter 1 is not of type 'Node'.

or

o.compareDocumentPosition is not a function

depending on the order of Menu.Items, i.e. depending on whether the class component MenuItem is in position a or b in a.compareDocumentPosition(b).

This error does not occur on v1.5.0. Perhaps something changed with how refs were passed onto the children of Menu.Item? #1168 also looks relevant since I believe it is crashing within sortByDomNode

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This issue occurs because you are not forwarding all the props and the ref to the underlying DOM node. I've updated your CodeSandbox that does this for both the class component and the functional component:

https://codesandbox.io/s/headlessui-react-menu-example-forked-sdnkl0?file=/src/App.js

In fact, this issue was also happening in Headless UI 1.5.0 but it was a bit less apparent. This CodeSandbox is the one you provided with version 1.5.0 of Headless UI, one thing you will notice is that you can't click the "Hello" menu item because the props were not forwarded correctly: https://codesandbox.io/s/headlessui-react-menu-example-forked-qggrlm?file=/src/App.js

Will make sure to make this better discoverable via docs / checks in Headless UI itself but have to think about a good solution for this.

[kevinwilde]

Thanks for the explanation!

[killemalljustice]

Hi @RobinMalfait , do you have an example of this for Vue???

Thanks!!

[jordcodes]

@killemalljustice I had a similar issue in vue and found using the as property on the menu item to a div made the error go away.