Issue #3192903 by mherchel, Gauravmahlawat, andrewmacpherson: Mouseout event...

Issue #3192903 by mherchel, Gauravmahlawat, andrewmacpherson: Mouseout event should not close navigation sub-menu if focus is inside the sub-menu

core/themes/olivero/css/components/navigation/nav-primary-wide.css

@@ -225,7 +225,7 @@
         border-left: solid 10px transparent;
       }
 
-      body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active {
+      body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active-menu-parent {
         visibility: visible;
         margin-top: 0;
         transform: translate(-50%, 0);

core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css

@@ -150,7 +150,7 @@ body:not(.is-always-mobile-nav) {
         border-left: solid 10px transparent;
       }
 
-      &.is-active {
+      &.is-active-menu-parent {
         visibility: visible;
         margin-block-start: 0;
         transform: translate(-50%, 0);

core/themes/olivero/css/components/navigation/nav-primary.css

@@ -291,7 +291,7 @@
   opacity: 0
 }
 
-.primary-nav__menu--level-2.is-active {
+.primary-nav__menu--level-2.is-active-menu-parent {
     visibility: visible;
     max-height: none;
     margin-top: 1.6875rem;

core/themes/olivero/css/components/navigation/nav-primary.pcss.css

@@ -156,7 +156,7 @@
   opacity: 0;
   border-inline-start: solid var(--sp) var(--color--blue-50);
 
-  &.is-active {
+  &.is-active-menu-parent {
     visibility: visible;
     max-height: none;
     margin-block-start: var(--sp1-5);

core/themes/olivero/js/second-level-navigation.es6.js

@@ -28,20 +28,20 @@
             'false',
           );
           el.querySelector('.primary-nav__menu--level-2').classList.remove(
-            'is-active',
+            'is-active-menu-parent',
           );
         });
       }
       button.setAttribute('aria-expanded', 'true');
       topLevelMenuITem
         .querySelector('.primary-nav__menu--level-2')
-        .classList.add('is-active');
+        .classList.add('is-active-menu-parent');
     } else {
       button.setAttribute('aria-expanded', 'false');
       topLevelMenuITem.classList.remove('is-touch-event');
       topLevelMenuITem
         .querySelector('.primary-nav__menu--level-2')
-        .classList.remove('is-active');
+        .classList.remove('is-active-menu-parent');
     }
   }
 
@@ -87,7 +87,12 @@
     });
 
     el.addEventListener('mouseout', () => {
-      if (isDesktopNav()) {
+      if (
+        isDesktopNav() &&
+        !document.activeElement.matches(
+          '[aria-expanded="true"], .is-active-menu-parent *',
+        )
+      ) {
         toggleSubNav(el, false);
       }
     });

core/themes/olivero/js/second-level-navigation.js

@@ -18,16 +18,16 @@
       if (isDesktopNav()) {
         secondLevelNavMenus.forEach(function (el) {
           el.querySelector(buttonSelector).setAttribute('aria-expanded', 'false');
-          el.querySelector('.primary-nav__menu--level-2').classList.remove('is-active');
+          el.querySelector('.primary-nav__menu--level-2').classList.remove('is-active-menu-parent');
         });
       }
 
       button.setAttribute('aria-expanded', 'true');
-      topLevelMenuITem.querySelector('.primary-nav__menu--level-2').classList.add('is-active');
+      topLevelMenuITem.querySelector('.primary-nav__menu--level-2').classList.add('is-active-menu-parent');
     } else {
       button.setAttribute('aria-expanded', 'false');
       topLevelMenuITem.classList.remove('is-touch-event');
-      topLevelMenuITem.querySelector('.primary-nav__menu--level-2').classList.remove('is-active');
+      topLevelMenuITem.querySelector('.primary-nav__menu--level-2').classList.remove('is-active-menu-parent');
     }
   }
 
@@ -56,7 +56,7 @@
       }
     });
     el.addEventListener('mouseout', function () {
-      if (isDesktopNav()) {
+      if (isDesktopNav() && !document.activeElement.matches('[aria-expanded="true"], .is-active-menu-parent *')) {
         toggleSubNav(el, false);
       }
     });