-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
The Menu component is not being propagated the touch event to the parent, so the Menu does not close automatically as expected. #2986
Comments
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. |
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. |
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+. |
Can confirm this still occurs in v1.7.19 - downgrading to v1.7.17 fixes the issue |
I can confirm this still occurs in v1.7.22 - downgrading to v1.7.17 or before fixes the issue |
Same problem here, would love see this issue solved in the newest versions |
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.
The text was updated successfully, but these errors were encountered: