NickDJM / accessible-menu

A JavaScript library to help you generate WAI-ARIA accessible menus in the DOM.
ISC License
35 stars 7 forks source link

Bug: disclosure submenus close unexpectedly when hover is on and mouse leaves and re-enters #299

Closed synthetiv closed 2 months ago

synthetiv commented 6 months ago

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

  1. Create a DisclosureMenu with settings like:
    hoverType: 'on',
    enterDelay: 0,
    leavedelay: 1000
  2. Hover over a top-level menu item to open the submenu
  3. Move your cursor into the submenu
  4. Move your cursor out of the submenu, then back in within 1000 ms (as if you accidentally moved it too far, then corrected)
  5. 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

NickDJM commented 6 months ago

@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.

NickDJM commented 2 months ago

v4.1.0 is out and includes this. Closing.