Skip to content
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

Expose close function for Menu and Menu.Item components #1897

Merged
merged 2 commits into from
Oct 4, 2022

Conversation

RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented Oct 4, 2022

This PR exposes a close function for the Menu and Menu.Item components so that you can
manually close it in case the automatic closing isn't working (due to 3rd party tools implementing
e.preventDefault())


Longer version:

The Menu will already automatically close if you invoke the Menu.Item (which is typically an a or a button). However you have control over this, so if you add an explicit onClick={e => e.preventDefault()} then we respect that and don't execute the default behavior, ergo closing the menu.

The problem occurs when you are using another component like the Inertia Link component, that does have this e.preventDefault() built-in to guarantee SPA-like page transitions without refreshing the browser. Because of this, the menu will never close (unless you go to a totally different page where the menu is not present of course).

This is where the explicit close function comes in, now you can use that function to "force" close a menu, if your 3rd party tool already bypassed the default behaviour.

This API is also how we do it in the Popover component for scenario's where you can't rely on the default behaviour.

Fixes: #1630

@vercel
Copy link

vercel bot commented Oct 4, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
headlessui-react ✅ Ready (Inspect) Visit Preview Oct 4, 2022 at 0:57AM (UTC)
headlessui-vue ✅ Ready (Inspect) Visit Preview Oct 4, 2022 at 0:57AM (UTC)

The `Menu` will already automatically close if you invoke the
`Menu.Item` (which is typically an `a` or a `button`). However you have
control over this, so if you add an explicit `onClick={e =>
e.preventDefault()}` then we respect that and don't execute the default
behavior, ergo closing the menu.

The problem occurs when you are using another component like the Inertia
`Link` component, that does have this `e.preventDefault()` built-in to
guarantee SPA-like page transitions without refreshing the browser.
Because of this, the menu will never close (unless you go to a totally
different page where the menu is not present of course).

This is where the explicit `close` function comes in, now you can use
that function to "force" close a menu, if your 3rd party tool already
bypassed the default behaviour.

This API is also how we do it in the `Popover` component for scenario's
where you can't rely on the default behaviour.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Allow manual closing of dropdown for links with preventDefault or possibly asynchronous operations
1 participant