MenuItems State Not Updating Without Button Data in HeadlessUI v2 - Worked Fine in v1

[benjaminbarbe]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.0.3

What browser are you using?

Chrome

Reproduction URL

https://stackblitz.com/~/github.com/benjaminbarbe/reproduction-headlessui-react

Describe your issue

The MenuItems don't update their state without information from the button. In my example, they are static and controlled by the transition. This worked perfectly in HeadlessUI v1.

https://github.com/tailwindlabs/headlessui/assets/630365/75d421b6-e377-42fc-a5a6-fe1f7481051d

Thanks

[julien3]

Same issue https://github.com/tailwindlabs/headlessui/issues/3201

[benjaminbarbe]

@thecrypticace @julien3's trick didn't work for me. Got any other workaround ideas? 🙏😊

[RobinMalfait]

Hey!

The Menu in Headless UI (or any Menu implementation with role="menu") only allows MenuItems inside. In Headless UI v1 and v2 we don't have support for nested Menu's yet, so if it worked in Headless UI v1 it worked on accident and nested Menu's are currently unsupported.

Going to close this for now, and hopefully we have support for nested Menu's in the future.