Menu items don't get focus when menu is static

[Julien Lehuraux]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.0.3 (react)

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/p/devbox/laughing-rosalind-cl9dzk?file=%2Fsrc%2FDemoMenu.jsx

Describe your issue

On static menus (static prop of MenuItems or show={true} on Transition), MenuItem(s) don't get any focus until MenuButton is clicked. v1.7.x behaved correctly.

[Robin Malfait]

Hey!

This is the expected behavior, the static prop only makes sure that the MenuItems are visually rendered and ignore the internal open state. The Menu component itself is not actually "open" from a functionality perspective.

The main reason this prop exists is if you want to use a 3rd party tool for transitions such as framer-motion because that will control the mounting / unmounting at the correct time.

If you are not using another tool / component for transitioning the MenuItems component, then you can safely remove the static prop.

Hope this helps!

[Julien Lehuraux]

Hey Robin,

Thanks for checking that one.

To be clear, with v1.7 you could programatically open/hide the dropdown as per what the documentation states at https://headlessui.com/v1/react/menu#showing-hiding-the-menu and https://headlessui.com/v1/react/menu#transitions. Now, the v2 documentation doesn't have those sections so I was fearing that the feature was gone.

Here's a quick v1.7 example showing that the hover behaves correctly with static menus that can be programatically opened: https://codesandbox.io/p/devbox/crazy-moon-pm4h3r?file=%2Fsrc%2FDemoMenu.jsx

When hovering over the menu items, render prop active is set to true even though the menu is static. If you just update headless ui dep to v2.0.3, thus using the deprecated Menu.Item components and the deprecated active render prop, this behaves differently: you need to click on the menu button for active (or the new focus render prop) to be set to true. This change breaks any desired custom behavior although the old prop and components are just deprecated.

I mean, it was easy to implement sub menus in v1.7, that the component is lacking right now, using the static prop or Transition show prop when using transitions.

Is this a desired design change and the solutions are either to stick with v1.7 or hack around?

[Julien Lehuraux]

I've just checked current menu code base and it looks like the __demoMode prop of Menu let us get that same old behavior, allowing to programatically open/hide dropdown. Simple hack for sure.