Merge branch 'fly-out-nav-hiding-fix' into 'master'

Fixes the fly-out navigation flashing in & out

Closes #37022

See merge request !13929

app/assets/javascripts/fly_out_nav.js

@@ -12,6 +12,7 @@ let sidebar;
 export const mousePos = [];
 
 export const setSidebar = (el) => { sidebar = el; };
+export const getOpenMenu = () => currentOpenMenu;
 export const setOpenMenu = (menu = null) => { currentOpenMenu = menu; };
 
 export const slope = (a, b) => (b.y - a.y) / (b.x - a.x);
@@ -141,6 +142,14 @@ export const documentMouseMove = (e) => {
   if (mousePos.length > 6) mousePos.shift();
 };
 
+export const subItemsMouseLeave = (relatedTarget) => {
+  clearTimeout(timeoutId);
+
+  if (!relatedTarget.closest(`.${IS_OVER_CLASS}`)) {
+    hideMenu(currentOpenMenu);
+  }
+};
+
 export default () => {
   sidebar = document.querySelector('.nav-sidebar');
 
@@ -162,10 +171,7 @@ export default () => {
     const subItems = el.querySelector('.sidebar-sub-level-items');
 
     if (subItems) {
-      subItems.addEventListener('mouseleave', () => {
-        clearTimeout(timeoutId);
-        hideMenu(currentOpenMenu);
-      });
+      subItems.addEventListener('mouseleave', e => subItemsMouseLeave(e.relatedTarget));
     }
 
     el.addEventListener('mouseenter', e => mouseEnterTopItems(e.currentTarget));

changelogs/unreleased/fly-out-nav-hiding-fix.yml

+---
+title: Fixed fly-out nav flashing in & out
+merge_request:
+author:
+type: fixed

spec/javascripts/fly_out_nav_spec.js

@@ -5,12 +5,14 @@ import {
   canShowActiveSubItems,
   mouseEnterTopItems,
   mouseLeaveTopItem,
+  getOpenMenu,
   setOpenMenu,
   mousePos,
   getHideSubItemsInterval,
   documentMouseMove,
   getHeaderHeight,
   setSidebar,
+  subItemsMouseLeave,
 } from '~/fly_out_nav';
 import bp from '~/breakpoints';
 
@@ -314,4 +316,29 @@ describe('Fly out sidebar navigation', () => {
       ).toBeTruthy();
     });
   });
+
+  describe('subItemsMouseLeave', () => {
+    beforeEach(() => {
+      el.innerHTML = '<div class="sidebar-sub-level-items" style="position: absolute;"></div>';
+
+      setOpenMenu(el.querySelector('.sidebar-sub-level-items'));
+    });
+
+    it('hides subMenu if element is not hovered', () => {
+      subItemsMouseLeave(el);
+
+      expect(
+        getOpenMenu(),
+      ).toBeNull();
+    });
+
+    it('does not hide subMenu if element is hovered', () => {
+      el.classList.add('is-over');
+      subItemsMouseLeave(el);
+
+      expect(
+        getOpenMenu(),
+      ).not.toBeNull();
+    });
+  });
 });