-
Notifications
You must be signed in to change notification settings - Fork 981
[NavigationMenu] Fix menu reopening on mouse move when closed with Esc #1579
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
[NavigationMenu] Fix menu reopening on mouse move when closed with Esc #1579
Conversation
Hey @rortan134, Not sure why the checks haven't run, would you be able to push a change or force-push to re-trigger them? Thanks 🙏 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry just one final nit before I merge!
Co-authored-by: Benoît Grélard <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unfortunately after testing this, I've just realised that this approach won't work.
To clarify it works if the trigger is focused, but not if you're just hovering with your mouse.
We cannot rely on the fact that the trigger is focused.
Instead we are going to have to rely on the onEscapeKeydown
event handler from DismissableLayer
.
So the way to go is:
- lift up
wasEscapeCloseRef
definition intoNavigationMenuItem
- pass it down through context (
NavigationMenuItemContextProvider
) - set the ref to
true
inonEscapeKeydown
onDismissableLayer
inNavigationMenuContentImpl
instead of in the trigger keydown event
Hopefully that's enough for you to get going, but let me know otherwise and I can take it from here otherwise! 🙏
I made the changes to make a shallower approach, though the root cause of the focus issue seems to be related to the document focus variable in
Therefore, since Storybook uses an iframe, there are two documents and only one of them can be focused, and if the external one (Sidebar + Header) is focused then the This issue is likely to be exclusive to Storybook though, since regular web pages usually don't have more than one document, and it won't be a problem. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
though the root cause of the focus issue seems to be related to the document focus variable in UseEscapeKeydown and the fact that Storybook has two documents
Therefore, since Storybook uses an iframe, there are two documents and only one of them can be focused, and if the external one (Sidebar + Header) is focused then the UseEscapeKeydown handler won't trigger and the dropdown won't close, which is likely what you saw happening.
I think you are getting your wires crossed a bit. Just to clarify, this isn't what I was referring to in my earlier comment.
To reproduce the issue I was discussing before with the naïve trigger onKeyDown
approach:
- click somewhere on the page to make sure the document is focused (or open the frame directly itself)
- hover a menu item (don't focus it with keyboard) -> menu opens
- press escape -> menu closes
- mouse mouse (still over the item) -> item reopens
This is because we were marking the prevention in the ref only in the onKeyDown of the trigger, which in this case would never happen because the trigger isn't focus so wouldn't receive a keydown event.
Hence why I requested the changes.
This is all working great now, thanks!
Fixes #1529
Makes the menu stay closed after pressing the Esc key