The Menu component is not being propagated the touch event to the parent, so the Menu does not close automatically as expected.

[CristFlores]

What package within Headless UI are you using? Response: @headlessui/react

What version of that package are you using? Response: v1.7.18

What browser are you using? For example: Chrome, Brave

Reproduction URL Response: https://github.com/CristFlores/headless-ui-issue/tree/main

Describe your issue Response: * IMPORTANT: To reproduce the issue, use the touch event, not the click event. * The Menu component does not close automatically when touching the child of some other button, i.e., the touch event is not being propagated to the parent and therefore the Menu component does not close unless the parent is touched directly, which it is not the expected behavior. * FYI: For the case where the child of the "other" button is plain text, the Menu component does close automatically when the child of the "other" button is touched.

[nickluger]

Could reproduce this. Exactly as said. If, for example, you have two menus (like in the image), tapping their menu buttons directly after each other will lead to both menus being open. This happens if their children, are not plain text (e.g. icons like in the image).

[nickluger]

Pretty contrived Workaround: The only reference to manually closing the menu i found in the docs is this: https://headlessui.com/react/menu#closing-menus-manually. (It seems there's no controlled version of this component)

So you need to get this callback from the render props and create a "fake"-menu-item, that just passes this callback to some global state (e.g. Context, Zustand, etc.).

Then some buttons can access these callbacks from the global state to force-close all other buttons when they are clicked.

[CristFlores]

xactly as said. If, for example, you have two menus (like in the image), tapping their menu buttons directly after each other will lead to both menus being open. This happens if their children, are not plain text (e.g. icons like in the image

That's right, I can confirm that this actually happens, since menus do not close automatically when their child is an icon, so when there is more than one menu it causes that eventually all menus can be open at the same time.

[CristFlores]

Pretty contrived Workaround: The only reference to manually closing the menu i found in the docs is this: https://headlessui.com/react/menu#closing-menus-manually. (It seems there's no controlled version of this component)

So you need to get this callback from the render props and create a "fake"-menu-item, that just passes this callback to some global state (e.g. Context, Zustand, etc.).

Then some buttons can access these callbacks from the global state to force-close all other buttons when they are clicked.

One thing that works for me was to downgrade the version of headlessUI from v1.7.18 to v1.7.17, it seems to be a bug in the versions v1.7.18+.

[damnsamn]

Can confirm this still occurs in v1.7.19 - downgrading to v1.7.17 fixes the issue

[Iwassherezade]

I can confirm this still occurs in v1.7.22 - downgrading to v1.7.17 or before fixes the issue

[ricardohsweiss]

Same problem here, would love see this issue solved in the newest versions