fix(gcds-nav-group): Focusout logic to close open dropdowns (#930)

* fix(gcds-nav-group): Focusout logic to close open dropdowns

* Update tab queue on keyboard press

---------

Co-authored-by: Melanie Boeckmann <melanie.bockmann@gmail.com>

Author: ethanWallace

packages/web/src/components/gcds-nav-group/gcds-nav-group.tsx

@@ -88,7 +88,7 @@ export class GcdsNavGroup {
     if (
       (e.target === this.el || this.el.contains(e.target)) &&
       !this.el.contains(e.relatedTarget) &&
-      this.navStyle === 'dropdown' &&
+      this.navStyle.includes('dropdown') &&
       this.open &&
       window.innerWidth >= 1024
     ) {

packages/web/src/utils/menus/utils.ts

@@ -24,6 +24,9 @@ export async function handleKeyDownNav(event, nav, queue) {
       } else {
         await focusNavItem(currentIndex + 1, queue);
       }
+      setTimeout(() => {
+        nav.updateNavItemQueue(nav);
+      }, 200);
       break;
 
     // Up arrow
@@ -36,6 +39,9 @@ export async function handleKeyDownNav(event, nav, queue) {
       } else {
         await focusNavItem(currentIndex - 1, queue);
       }
+      setTimeout(() => {
+        nav.updateNavItemQueue(nav);
+      }, 200);
       break;
 
     // Right arrow
@@ -92,6 +98,9 @@ export async function handleKeyDownNav(event, nav, queue) {
           }
         }
       }
+      setTimeout(() => {
+        nav.updateNavItemQueue(nav);
+      }, 200);
       break;
 
     // ENTER || SPACEBAR