[React] Dropdown Menu in example not rendering

[ronnyek]

What component (if applicable)

• Component name: Menu

Describe the bug
I'm not sure if this is problem with example documentation, or the actual menu components, but in attempting to render a layout with code from documentation, profile dropdown menus dont work. I believe an attribute of the menu changes to indicate its open, but never see anything change or dom being modified to include the menu items.

To Reproduce
Steps to reproduce the behavior:

1. Incorporate react code in example https://tailwindui.com/components/application-ui/application-shells/multi-column#component-b639fa188098a2dbfd9f419c6ef9c6f3
2. Ensure the html/body changes are applied
3. Click profile menu
4. Observe nothing happening except the avatar ring toggling visible / invisible

Expected behavior
I'd expect a popup of the user profile menu to display and hide when clicking user avatar

Screenshots
If I inspect document of the documentation frame, I see something like the following

but in the UI my current project renders, none of that code seems to be generated.

Browser/Device (if applicable)

• OS: windows 10
• Browser: brave and chrome latest stable

[ronnyek]

As an additional piece of info, the mobile menu also does not display when clicking (when be displaying in window small enough to render as a mobile app.

[RobinMalfait]

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

I'm guessing that you are using this with React 18. React 18 has StrictMode (enabled by default in Next.js applications) which enables double rendering in development to make your application concurrent mode ready. Try to install the insiders build of Headless UI (we will soon publish version 1.6.0) where we applied fixes for React 18 compatibility (more info: tailwindlabs/headlessui#681)

Hope this helps!

[ronnyek]

Oh this did help... this was exactly the problem, and didn't realize including the fact this was a nextjs app was important here. I appreciate the quick response.