diff --git a/config/package-solution.json b/config/package-solution.json index c482bde..d8f6c13 100644 --- a/config/package-solution.json +++ b/config/package-solution.json @@ -3,7 +3,7 @@ "solution": { "name": "mega-menu-client-side-solution", "id": "f4660e06-ce08-43ee-bfb7-5c4464e01133", - "version": "1.0.7.0", + "version": "1.0.0", "includeClientSideAssets": true, "skipFeatureDeployment": true }, diff --git a/src/extensions/megaMenu/MegaMenuRenderer.ts b/src/extensions/megaMenu/MegaMenuRenderer.ts index 2a53a66..a5e9bd4 100644 --- a/src/extensions/megaMenu/MegaMenuRenderer.ts +++ b/src/extensions/megaMenu/MegaMenuRenderer.ts @@ -227,6 +227,7 @@ export class MegaMenuRenderer { } this.attachGlobalKeyboardNavigation(); + this.attachGlobalClickOutsideHandler(); } private attachKeyboardNavigation(heading: HTMLElement, megaMenu: HTMLElement): void { @@ -382,6 +383,25 @@ export class MegaMenuRenderer { }); } + private attachGlobalClickOutsideHandler(): void { + document.addEventListener('click', (e: MouseEvent) => { + const eventTarget = e.target as Element; + const isInsideNavigation = !!(eventTarget && typeof eventTarget.closest === 'function' && + eventTarget.closest('#CustomNavigation')); + + if (isInsideNavigation) { + return; + } + + const openMenu = document.querySelector('.mega-menu.js-open') as HTMLElement; + + if (openMenu) { + debugLog(this.debug, LOG_SOURCE, 'Closing menu because of outside click.'); + this.closeAllMegaMenus(); + } + }); + } + private openMegaMenu(trigger: HTMLElement, menu: HTMLElement): void { this.closeAllMegaMenus(menu); trigger.setAttribute('aria-expanded', 'true');