From 16dd3330b9708765a21c90b0a2cc50cf36be9d39 Mon Sep 17 00:00:00 2001
From: cv5ch <176032962+cv5ch@users.noreply.github.com>
Date: Thu, 10 Jul 2025 14:56:26 +0200
Subject: [PATCH] Fix dropdown to close when moving mouse cursor outside

---
 .../action-menu/action-menu.component.html    |  10 +-
 .../action-menu/action-menu.component.ts      | 340 +++++++++++-------
 .../menus/action-menu/action-menu.model.ts    |   4 +-
 3 files changed, 224 insertions(+), 130 deletions(-)

diff --git a/src/app/core/_components/menus/action-menu/action-menu.component.html b/src/app/core/_components/menus/action-menu/action-menu.component.html
index e009e4265..f3a9f45d5 100644
--- a/src/app/core/_components/menus/action-menu/action-menu.component.html
+++ b/src/app/core/_components/menus/action-menu/action-menu.component.html
@@ -18,8 +18,14 @@
     </ng-container>
   </button>
 
-  <mat-menu #actionMenu="matMenu" [hasBackdrop]="false">
-    <ng-container *ngFor="let section of actionMenuItems; let last = last">
+  <mat-menu
+    #actionMenu="matMenu"
+    [hasBackdrop]="false"
+    (mouseenter)="onMenuMouseEnter()"
+    (mouseleave)="onMenuMouseLeave($event)"
+  >
+
+  <ng-container *ngFor="let section of actionMenuItems; let last = last">
       <button
         mat-menu-item
         *ngFor="let item of section"
diff --git a/src/app/core/_components/menus/action-menu/action-menu.component.ts b/src/app/core/_components/menus/action-menu/action-menu.component.ts
index 640a41cb4..89065a708 100644
--- a/src/app/core/_components/menus/action-menu/action-menu.component.ts
+++ b/src/app/core/_components/menus/action-menu/action-menu.component.ts
@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @angular-eslint/component-selector */
 import { faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
 import { faGlobe, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
 import { faBook } from '@fortawesome/free-solid-svg-icons';
@@ -15,6 +13,7 @@ import {
   OnDestroy,
   OnInit,
   Output,
+  Renderer2,
   ViewChild
 } from '@angular/core';
 import { MatMenuTrigger } from '@angular/material/menu';
@@ -26,28 +25,6 @@ import { ActionMenuEvent, ActionMenuItem } from '@components/menus/action-menu/a
 
 import { UISettingsUtilityClass } from '@src/app/shared/utils/config';
 
-/**
- * Component representing an action menu with a list of menu items.
- *
- * Each action menu item can have either an `action` or a `routerLink`. If
- * the menu item `action` attribute is set an event is emitted with the
- * menu item itself and the `data` privided when clicked. If the `routerLink`
- * attribute is set the user will be routed on click.
- *
- * The actionMenuItems are divided into sections by providing them in separate
- * arrays like this: `[[A, B, C], [D, E, F]]`. This will generate two sections
- * separetad by a divider.
- *
- * @example
- * <action-menu
- *   icon="menu"
- *   label="Actions"
- *   cls="custom-class"
- *   [data]="customData"
- *   [actionMenuItems]="menuItems"
- *   (menuItemClicked)="onMenuItemClicked($event)"
- * ></action-menu>
- */
 @Component({
   selector: 'action-menu',
   templateUrl: './action-menu.component.html',
@@ -56,34 +33,30 @@ import { UISettingsUtilityClass } from '@src/app/shared/utils/config';
 export class ActionMenuComponent implements OnInit, AfterViewInit, OnDestroy {
   private subscriptions: Subscription[] = [];
 
+  private globalMouseMoveListener: (() => void) | null = null;
+
   hovering = false;
   hoverTimeout: ReturnType<typeof setTimeout>;
   menuPanelId: string | undefined;
 
-  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;
+  @ViewChild(MatMenuTrigger) trigger!: MatMenuTrigger;
   @ViewChild('menuTriggerButton', { read: ElementRef }) triggerButton!: ElementRef<HTMLButtonElement>;
 
-  currentUrl: any[];
+  currentUrl: string[] = [];
   isActive = false;
 
   protected uiSettings: UISettingsUtilityClass;
 
-  /** Icon to be displayed in the menu button. */
-  @Input() icon: string;
-  /** Label for the menu button. */
-  @Input() label: string;
-  /** Determines if the menu button is disabled. */
+  @Input() icon: string = '';
+  @Input() label: string = '';
   @Input() disabled = false;
-  /** Custom CSS classes for styling. */
   @Input() cls = '';
-  /** Custom data to be associated with the menu. */
-  @Input() data: any;
-  /** Two-dimensional array of sections / menu items. */
+  @Input() data: unknown;
   @Input() actionMenuItems: ActionMenuItem[][] = [];
 
   @Input() openOnMouseEnter = false;
 
-  @Output() menuItemClicked: EventEmitter<ActionMenuEvent<any>> = new EventEmitter<ActionMenuEvent<any>>();
+  @Output() menuItemClicked: EventEmitter<ActionMenuEvent<unknown>> = new EventEmitter<ActionMenuEvent<unknown>>();
 
   openSubmenus: MatMenuTrigger[] = [];
 
@@ -96,120 +69,110 @@ export class ActionMenuComponent implements OnInit, AfterViewInit, OnDestroy {
   isDarkMode = false;
   faIconColor = 'white';
 
+  hoveringButton = false;
+  hoveringMenu = false;
+
   private static openMenuTrigger: MatMenuTrigger | null = null;
 
   constructor(
     private router: Router,
-    private storage: LocalStorageService<UIConfig>
+    private storage: LocalStorageService<UIConfig>,
+    private renderer: Renderer2
   ) {
     this.uiSettings = new UISettingsUtilityClass(this.storage);
     this.isDarkMode = this.uiSettings.getSetting('theme') === 'dark';
-    if (this.isDarkMode) {
-      this.faIconColor = 'white';
-    } else {
-      this.faIconColor = 'black';
-    }
+    this.faIconColor = this.isDarkMode ? 'white' : 'black';
   }
 
+  /**
+   * Angular lifecycle hook: Initializes component.
+   * Subscribes to router events to close menu on navigation and update active state.
+   */
   ngOnInit(): void {
     this.subscriptions.push(
-      this.router.events.subscribe((event: any) => {
+      this.router.events.subscribe((event) => {
         if (event instanceof NavigationEnd) {
           this.currentUrl = event.url.split('/').slice(1);
           this.checkIsActive();
+
+          // Close menu on navigation end
+          if (this.trigger?.menuOpen) {
+            this.trigger.closeMenu();
+          }
         }
       })
     );
   }
 
   /**
-   * After view init, gets the menu panel ID for hover checks and subscribes to the
-   * `menuClosed` event. The subscription cleans up the static `openMenuTrigger`
-   * reference to ensure only one menu can be open at a time.
+   * Angular lifecycle hook: Called after view initialization.
+   * Sets menuPanelId, subscribes to menu open/close events to manage global mouse listener.
    */
   ngAfterViewInit(): void {
     this.menuPanelId = this.trigger.menu?.panelId;
 
-    // Add this subscription to handle cleanup
     this.subscriptions.push(
       this.trigger.menuClosed.subscribe(() => {
-        // When this menu closes, check if it was the one being tracked.
-        // If so, clear the static reference.
         if (ActionMenuComponent.openMenuTrigger === this.trigger) {
           ActionMenuComponent.openMenuTrigger = null;
         }
+        this.removeGlobalMouseListener();
       })
     );
-  }
-
-  /**
-   *  Display fontawesome icons according to the icon name
-   **/
-  iconContainsDiscord(name: string): boolean {
-    if (name != undefined) {
-      return name.toLowerCase() === 'fadiscord';
-    } else {
-      return false;
-    }
-  }
 
-  iconContainsGithub(name: string): boolean {
-    if (name != undefined) {
-      return name.toLowerCase() === 'fagithub';
-    } else {
-      return false;
-    }
+    this.subscriptions.push(
+      this.trigger.menuOpened.subscribe(() => {
+        this.addGlobalMouseListener();
+      })
+    );
   }
 
-  iconContainsPaperplane(name: string): boolean {
-    if (name != undefined) {
-      return name.toLowerCase() === 'fapaperplane';
-    } else {
-      return false;
-    }
-  }
+  /**
+   * Adds a global mousemove event listener on the document.
+   * Used to detect when the mouse pointer moves outside the button and menu to close it.
+   * Prevents multiple listeners by checking if one already exists.
+   */
+  addGlobalMouseListener() {
+    if (this.globalMouseMoveListener) return; // already listening
 
-  iconContainsGlobe(name: string): boolean {
-    if (name != undefined) {
-      return name.toLowerCase() === 'faglobe';
-    } else {
-      return false;
-    }
+    this.globalMouseMoveListener = this.renderer.listen('document', 'mousemove', (event: MouseEvent) => {
+      this.checkPointerOutside(event);
+    });
   }
 
-  iconContainsBook(name: string): boolean {
-    if (name != undefined) {
-      return name.toLowerCase() === 'fabook';
-    } else {
-      return false;
+  /**
+   * Removes the global mousemove event listener if it exists.
+   * Called when the menu closes to clean up resources.
+   */
+  removeGlobalMouseListener() {
+    if (this.globalMouseMoveListener) {
+      this.globalMouseMoveListener();
+      this.globalMouseMoveListener = null;
     }
   }
 
+  /**
+   * Angular lifecycle hook: Cleans up subscriptions and removes global mouse listener.
+   */
   ngOnDestroy(): void {
     for (const sub of this.subscriptions) {
       sub.unsubscribe();
     }
+    this.removeGlobalMouseListener();
   }
 
   /**
-   * Checks if a menu item should be considered active based on the current URL.
-   * It sets the 'isActive' property to true if the menu item's 'routerLink' matches
-   * or partially matches the beginning of the current URL.
-   *
-   * The 'actionMenuItems' array should contain sections of menu items, where each
-   * section is an array of menu items with 'routerLink' properties.
-   *
+   * Checks if the current URL matches any of the routerLinks in the menu items.
+   * Sets the isActive flag to highlight the active menu state.
    */
   checkIsActive(): void {
     this.isActive = false;
     for (const section of this.actionMenuItems) {
-      if (this.isActive) {
-        break;
-      }
+      if (this.isActive) break;
       for (const item of section) {
         if (item.routerLink) {
           const partial = this.currentUrl.slice(0, item.routerLink.length);
-          if (item.routerLink && partial.every((value, index) => value === item.routerLink[index])) {
+          if (partial.every((value, index) => value === item.routerLink[index])) {
             this.isActive = true;
             break;
           }
@@ -219,80 +182,205 @@ export class ActionMenuComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   /**
-   * Handle the click event when a menu item is selected.
-   * @param menuItem - The selected menu item.
+   * Handles a click on a menu item.
+   * Navigates internally or externally based on menuItem properties,
+   * or emits an event for custom handling.
+   * Closes the menu afterward.
+   * @param menuItem The clicked ActionMenuItem
    */
   onMenuItemClick(menuItem: ActionMenuItem): void {
     if (menuItem.routerLink && !menuItem.external) {
-      this.router.navigate(menuItem.routerLink);
+      this.router.navigate(menuItem.routerLink).then(() => {
+        this.closeMenuIfOpen();
+      });
     } else if (menuItem.routerLink && menuItem.external) {
-      // Open external link in a new tab
       window.open(String(menuItem.routerLink), '_blank');
+      this.closeMenuIfOpen();
     } else {
       this.menuItemClicked.emit({
-        menuItem: menuItem,
+        menuItem,
         data: this.data
       });
+      this.closeMenuIfOpen();
+    }
+  }
+
+  /**
+   * Closes the menu if it is currently open.
+   */
+  closeMenuIfOpen(): void {
+    if (this.trigger?.menuOpen) {
+      this.trigger.closeMenu();
     }
   }
 
+  /**
+   * Handles mouse entering the menu trigger button.
+   * Opens the menu if not already open and closes any other open menus.
+   */
   onMouseEnter(): void {
-    // If a different menu is open, close it.
+    this.hoveringButton = true;
+    this.clearHoverTimeout();
+
     if (ActionMenuComponent.openMenuTrigger && ActionMenuComponent.openMenuTrigger !== this.trigger) {
       ActionMenuComponent.openMenuTrigger.closeMenu();
     }
 
-    this.hovering = true;
-    clearTimeout(this.hoverTimeout);
     if (!this.trigger.menuOpen) {
       this.trigger.openMenu();
-      // Set the current trigger as the globally open one.
       ActionMenuComponent.openMenuTrigger = this.trigger;
     }
   }
 
+  /**
+   * Handles mouse leaving the menu trigger button.
+   * Starts a timeout to possibly close the menu if pointer leaves both button and menu.
+   * @param event MouseEvent triggered on mouse leave
+   */
   onMouseLeave(event: MouseEvent): void {
+    this.hoveringButton = false;
+    this.startHoverTimeout(event);
+  }
+
+  /**
+   * Handles mouse entering the menu panel.
+   * Cancels any pending close timeout.
+   */
+  onMenuMouseEnter(): void {
+    this.hoveringMenu = true;
+    this.clearHoverTimeout();
+  }
+
+  /**
+   * Handles mouse leaving the menu panel.
+   * Starts a timeout to possibly close the menu if pointer leaves both button and menu.
+   * @param event MouseEvent triggered on mouse leave
+   */
+  onMenuMouseLeave(event: MouseEvent): void {
+    this.hoveringMenu = false;
+    this.startHoverTimeout(event);
+  }
+
+  /**
+   * Starts a short timeout (150ms) to check if the mouse pointer
+   * is outside both the trigger button and menu panel before closing the menu.
+   * @param event MouseEvent used to check pointer position
+   */
+  startHoverTimeout(event: MouseEvent) {
     this.hoverTimeout = setTimeout(() => {
-      this.checkMouseOutside(event);
+      this.checkPointerOutside(event);
     }, 150);
   }
 
-  checkMouseOutside(event: MouseEvent): void {
+  /**
+   * Clears any pending hover timeout to prevent premature menu closing.
+   */
+  clearHoverTimeout() {
+    if (this.hoverTimeout) {
+      clearTimeout(this.hoverTimeout);
+    }
+  }
+
+  /**
+   * Prevents the default focus behavior and removes focus from the event target.
+   * Used to manage focus styling or accessibility.
+   * @param event FocusEvent to prevent default behavior
+   */
+  preventFocus(event: FocusEvent): void {
+    event.preventDefault();
+    (event.target as HTMLElement).blur();
+  }
+
+  /**
+   * Navigates to the first menu item programmatically.
+   * Opens external links in a new tab or routes internally.
+   * Closes the menu afterward.
+   * @param event MouseEvent to stop propagation
+   */
+  navigateToFirst(event: MouseEvent): void {
+    event.stopPropagation();
+    const firstItem = this.actionMenuItems[0]?.[0];
+    if (!firstItem) return;
+
+    if (firstItem.external) {
+      window.open(String(firstItem.routerLink), '_blank');
+      this.closeMenuIfOpen();
+    } else if (firstItem.routerLink) {
+      this.router.navigate(firstItem.routerLink).then(() => {
+        this.closeMenuIfOpen();
+      });
+    }
+  }
+
+  /**
+   * Returns true if mouse pointer is outside both the trigger button and menu panel.
+   * @param event MouseEvent to get pointer location
+   */
+  isPointerOutside(event: MouseEvent): boolean {
     const x = event.clientX;
     const y = event.clientY;
 
     const hoveredElement = document.elementFromPoint(x, y);
 
-    // Check if element is inside trigger or menu
     const insideTrigger = this.triggerButton.nativeElement.contains(hoveredElement);
     const insideMenu = hoveredElement?.closest(`#${this.menuPanelId ?? ''}`);
 
-    if (!insideTrigger && !insideMenu) {
-      this.trigger.closeMenu();
-      this.hovering = false;
-    }
+    return !(insideTrigger || insideMenu);
   }
 
   /**
-   * Prevent focus on the button.
-   * @param event - The focus event.
+   * Checks if the mouse pointer is outside both the trigger button and menu panel,
+   * and closes the menu if so. This method is called on every mousemove event globally.
+   * @param event MouseEvent containing pointer coordinates
    */
-  preventFocus(event: FocusEvent): void {
-    // Prevent the focus and blur the button immediately
-    event.preventDefault();
-    (event.target as HTMLElement).blur();
+  checkPointerOutside(event: MouseEvent) {
+    if (this.isPointerOutside(event)) {
+      this.trigger.closeMenu();
+    }
   }
 
   /**
-   * Navigate to the first menu item.
-   * @param event - The mouse event.
+   * Helper methods to check if the provided icon name matches a known FontAwesome icon.
+   * @param name The icon name string to check
+   * @returns True if the icon name matches the specific FontAwesome icon
    */
-  navigateToFirst(event: MouseEvent): void {
-    event.stopPropagation();
-    if (this.actionMenuItems[0][0].external) {
-      window.open(String(this.actionMenuItems[0][0].routerLink), '_blank');
-    } else if (this.actionMenuItems[0][0].routerLink) {
-      this.router.navigate(this.actionMenuItems[0][0].routerLink);
+  iconContainsDiscord(name: string): boolean {
+    if (name != undefined) {
+      return name.toLowerCase() === 'fadiscord';
+    } else {
+      return false;
+    }
+  }
+
+  iconContainsGithub(name: string): boolean {
+    if (name != undefined) {
+      return name.toLowerCase() === 'fagithub';
+    } else {
+      return false;
+    }
+  }
+
+  iconContainsPaperplane(name: string): boolean {
+    if (name != undefined) {
+      return name.toLowerCase() === 'fapaperplane';
+    } else {
+      return false;
+    }
+  }
+
+  iconContainsGlobe(name: string): boolean {
+    if (name != undefined) {
+      return name.toLowerCase() === 'faglobe';
+    } else {
+      return false;
+    }
+  }
+
+  iconContainsBook(name: string): boolean {
+    if (name != undefined) {
+      return name.toLowerCase() === 'fabook';
+    } else {
+      return false;
     }
   }
 }
diff --git a/src/app/core/_components/menus/action-menu/action-menu.model.ts b/src/app/core/_components/menus/action-menu/action-menu.model.ts
index 5ae71cecf..70c189b70 100644
--- a/src/app/core/_components/menus/action-menu/action-menu.model.ts
+++ b/src/app/core/_components/menus/action-menu/action-menu.model.ts
@@ -8,6 +8,6 @@ export interface ActionMenuItem {
   action?: string;
   icon?: string;
   red?: boolean;
-  routerLink?: any[];
-  external?: any;
+  routerLink?: string[];
+  external?: boolean;
 }