fix(gcds-top-nav/gcds-side-nav): Issues with mobile menu closing (#1029)

Author: ethanWallace

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

@@ -85,7 +85,7 @@ export class GcdsSideNav {
 
   @Listen('focusout', { target: 'document' })
   async focusOutListener(e) {
-    if (!this.el.contains(e.relatedTarget)) {
+    if (e.relatedTarget !== null && e.relatedTarget !== this.el && !this.el.contains(e.relatedTarget)) {
       if (this.navSize == 'mobile') {
         if (this.mobile.hasAttribute('open')) {
           await this.mobile.toggleNav();
@@ -98,6 +98,9 @@ export class GcdsSideNav {
   async keyDownListener(e) {
     if (this.el.contains(document.activeElement)) {
       handleKeyDownNav(e, this.el, this.navItems);
+    } if (this.navSize == 'mobile' && this.mobile.open == true && e.key == 'Escape') {
+      // Close mobile nav on ESC
+      await this.mobile.toggleNav();
     }
   }
 

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

@@ -102,7 +102,7 @@ export class GcdsTopNav {
 
   @Listen('focusout', { target: 'document' })
   async focusOutListener(e) {
-    if (!this.el.contains(e.relatedTarget)) {
+    if (e.relatedTarget !== null && e.relatedTarget !== this.el && !this.el.contains(e.relatedTarget)) {
       if (this.navSize == 'mobile') {
         if (this.mobile.hasAttribute('open')) {
           await this.mobile.toggleNav();
@@ -115,6 +115,9 @@ export class GcdsTopNav {
   async keyDownListener(e) {
     if (this.el.contains(document.activeElement)) {
       handleKeyDownNav(e, this.el, this.navItems);
+    } else if (this.navSize == 'mobile' && this.mobile.open == true && e.key == 'Escape') {
+      // Close mobile nav on ESC
+      await this.mobile.toggleNav();
     }
   }