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 89065a70..71fec7ea 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 @@ -56,6 +56,12 @@ export class ActionMenuComponent implements OnInit, AfterViewInit, OnDestroy { @Input() openOnMouseEnter = false; + /** + * If true, enable hover-close behavior. Useful for cases + * where the menu should close when leaving mouse outside. + */ + @Input() enableHoverClose = false; + @Output() menuItemClicked: EventEmitter> = new EventEmitter>(); openSubmenus: MatMenuTrigger[] = []; @@ -122,7 +128,10 @@ export class ActionMenuComponent implements OnInit, AfterViewInit, OnDestroy { this.subscriptions.push( this.trigger.menuOpened.subscribe(() => { - this.addGlobalMouseListener(); + // Slight delay to ensure the menu DOM is initialized before checking pointer + setTimeout(() => { + this.addGlobalMouseListener(); + }, 50); // even 10–30ms might work; tune as needed }) ); } @@ -267,6 +276,7 @@ export class ActionMenuComponent implements OnInit, AfterViewInit, OnDestroy { * @param event MouseEvent used to check pointer position */ startHoverTimeout(event: MouseEvent) { + if (!this.openOnMouseEnter || !this.enableHoverClose) return; this.hoverTimeout = setTimeout(() => { this.checkPointerOutside(event); }, 150); @@ -334,6 +344,7 @@ export class ActionMenuComponent implements OnInit, AfterViewInit, OnDestroy { * @param event MouseEvent containing pointer coordinates */ checkPointerOutside(event: MouseEvent) { + if (!this.openOnMouseEnter || !this.enableHoverClose) return; if (this.isPointerOutside(event)) { this.trigger.closeMenu(); } diff --git a/src/app/layout/header/header.component.html b/src/app/layout/header/header.component.html index 3565cebb..ea090155 100644 --- a/src/app/layout/header/header.component.html +++ b/src/app/layout/header/header.component.html @@ -20,6 +20,7 @@ [label]="menuItem.label" [icon]="menuItem.icon" [actionMenuItems]="menuItem.actions" + [enableHoverClose]="true" [openOnMouseEnter]="true" (menuItemClicked)="menuItemClicked($event)" >