Fixes the fly-out navigation flashing in & outfly-out-nav-hiding-fix

Closes #37022

3 files changed, 42 insertions, 4 deletions

diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js
index 81697af189b..063155a167a 100644
--- a/app/assets/javascripts/fly_out_nav.js
+++ b/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));
diff --git a/changelogs/unreleased/fly-out-nav-hiding-fix.yml b/changelogs/unreleased/fly-out-nav-hiding-fix.yml
new file mode 100644
index 00000000000..0688ea89d16
--- /dev/null
+++ b/changelogs/unreleased/fly-out-nav-hiding-fix.yml
@@ -0,0 +1,5 @@
+---
+title: Fixed fly-out nav flashing in & out
+merge_request:
+author:
+type: fixed
diff --git a/spec/javascripts/fly_out_nav_spec.js b/spec/javascripts/fly_out_nav_spec.js
index 0847e463577..4588bf3d971 100644
--- a/spec/javascripts/fly_out_nav_spec.js
+++ b/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();
+    });
+  });
 });