How to make Material Design Menu (mat-menu) hide on mouseleave

I succeeded in making the menu appear on mouseenter. What I want to do now is make it disappear on the mouseleave event of the menu itself. Any ideas on how to make this possible?

mouseenter

mouseleave

<button mat-button [mat-menu-trigger-for]="menu"
#menuTrigger="matMenuTrigger" (mouseenter)="menuTrigger.openMenu()">
TRIGGER BUTTON
</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false"
(mouseleave)="menuTrigger.closeMenu()">
<button mat-menu-item [routerLink]="['sources']">
<mat-icon>view_headline</mat-icon>
MENU CHOICE
</button>
</mat-menu>


this.menuTrigger.closeMenu()

1 Answer
1

You can do this by wrapping the menu buttons in a <span> element:

<span>

HTML:

<button mat-button
[matMenuTriggerFor]="menu"
(mouseenter)="openMyMenu()">
Trigger
</button>
<mat-menu #menu="matMenu" overlapTrigger="false">
<span (mouseleave)="closeMyMenu()">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</span>
</mat-menu>


Component:

export class MenuOverviewExample {
@ViewChild(MatMenuTrigger) trigger: MatMenuTrigger;

openMyMenu() {
this.trigger.openMenu();
}
closeMyMenu() {
this.trigger.closeMenu();
}
}


StackBlitz

Material V6:

StackBlitz

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.