Menu doesn't open when clicked if another menu is still opened

[michaelcais]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.4.2

What browser are you using?

Chrome and Safari

Reproduction URL

https://codesandbox.io/s/headlessui-menu-d32f9?file=/src/App.js

Describe your issue

When using multiple Menu components utilizing the open props, clicking on the Menu.Button does not automatically open the underlying Menu.Items if there is another Menu.Items from another Menu.Button that is still opened. It will just close the other opened Menu.Items and the user needs to click again to open. This happens when using "relative" positioning imitating the behavior of an accordion panel similar to what the "Disclosure" component does. When using "absolute" positioning for the Menu.Items, the clicks work without issues.

Popover has a grouping tool that supposedly handles multiple Popover components. Does the Menu also need similar grouping?

[RobinMalfait]

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

This should work as expected as seen here: https://headlessui-react-1fm0nfl5r-tailwindlabs.vercel.app/menu/multiple-elements

The issue is that the menu buttons jump around the moment you click on another one. This means that the mousedown triggers the menu to close, this in turn re-renders everything and moves all the buttons a but. Then the corresponding mouseup is not trigger on the correct element anymore, therefore resulting in a "click outside".

This also explains why it does work when using absolute, because the buttons will be in a consistent spot.

While we can try and fix this bug, this will happen for non-Headless UI components as well. For example, open one of the menu items, then try to click the bottom button. Then try again with the top button: https://codesandbox.io/s/headlessui-menu-forked-pw3n2?file=/src/App.js

[bhattrajat]

Hi, @RobinMalfait Thanks for explaining the reason behind this behavior.

I wanted to implement mobile menu which looks something like this

Is there a way to implement this without using absolute?

[alexnatea]

Hi. I migrated from v1.7.x to v2.0.4. I search the internet for this issue and I came up to this issue. I have the same problem now. When a Listbox is open, I cannot instanlty click on other elements (like other dropdowns, inputs, textarea). When I click on something outside the opened listbox it triggers only the 'on close' action for the menu, only then I can click on other elements. The behaviour of v1.7.x was: when listbox is open and I click other elements on form, it instalty closes the open menu and focus the element I was pointing. So from UX perspective, I would like to only use 1 click, not 2 clicks when opening a listbox and focus other element. Thank you!