Expose close function for Menu and Menu.Item components
#1897
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
RobinMalfait
force-pushed
the
fix/issue-1630
branch
from
7af4a04
to
d94dba5
Compare
RobinMalfait
force-pushed
the
fix/issue-1630
branch
from
d94dba5
to
5f1d6e1
Compare
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.
RobinMalfait
force-pushed
the
fix/issue-1630
branch
from
5f1d6e1
to
4753e94
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR exposes a
closefunction for theMenuandMenu.Itemcomponents so that you canmanually close it in case the automatic closing isn't working (due to 3rd party tools implementing
e.preventDefault())Longer version:
The
Menuwill already automatically close if you invoke theMenu.Item(which is typically anaor abutton). However you have control over this, so if you add an explicitonClick={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
Linkcomponent, that does have thise.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
closefunction 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
Popovercomponent for scenario's where you can't rely on the default behaviour.Fixes: #1630