[BUG]Broken Header Menu Navigation On Mouse Hover

[khaledobaid]

In the Blocks->Header , either in the preview component or after installation.

on Mouse Hover, the menu items with sub menu items are not working properly, sometimes you have to click, and sometimes it will show the sub menu items only after Mouse out from that menu item, Sometimes it show then hide then show again, sometimes it showen then directly hide again. it is not stable.

To Reproduce

1. Go to 'docs/blocks/header' | Make sure to refresh the page
2. Hover mouse on 'Digital participation'
3. Take the mouse out of the menu item, go back again | Or click on it try to move out and in multiple times, and click from time to time.
4. See error

Expected behaviour
To make sub menu items shows properly.

Tried on Chrome latest version, Windows 10 on a desktop machine full view.

[moiz-conceptlz]

Hello @khaledobaid

I was unable to replicate the issue as described. However, I do see the point about hovering. there is a constant flicker because of the native hover effect.

Therefore, the next version release of the design system will bundle https://tristen.ca/hoverintent/ and implement hoverIntent as the default for all methods related to Javascript hover effects.

[moiz-conceptlz]

Version 2.2.7 has been released, and the aegov-scripts bundle is now inclusive of https://tristen.ca/hoverintent/ by default. It has also been applied for the primary navigation. Now, hoverIntent is the default method.

To apply this:

Update data-dropdown-trigger="hover" to data-dropdown-trigger="none" in the header or navigation block. This will remove the default hover functionality of the browser and move to the use of hoverIntent as the default.