accessible-menu
accessible-menu copied to clipboard
Bug: disclosure submenus close unexpectedly when hover is on and mouse leaves and re-enters
Summary
With a DisclosureMenu with hover on and leaveDelay > 0, if you hover to open a menu, move your mouse cursor outside the menu, and then return the cursor before menu closes, the menu will still close, even with your cursor hovering over it. This behavior is awkward and confusing for users.
Steps to reproduce
- Create a DisclosureMenu with settings like:
hoverType: 'on',
enterDelay: 0,
leavedelay: 1000
- Hover over a top-level menu item to open the submenu
- Move your cursor into the submenu
- Move your cursor out of the submenu, then back in within 1000 ms (as if you accidentally moved it too far, then corrected)
- The submenu still closes.
Expected Behaviour
leaveDelay timeout should be cleared on cursor re-entry. Menus should only close when you (a) open another menu, or (b) keep your cursor outside them for leaveDelay ms.
Additional context
CodePen example, based on the "Disclosure Navigation Menu" example from this repo: https://codepen.io/synthetiv/pen/WNWGqxr
@synthetiv Thanks for the issue and PR!
I see the issue in the code pen, good catch. I'll boot up the local demo environment with your fix to test it shortly.
We should add a couple tests for this as well.
v4.1.0 is out and includes this. Closing.