Angular mouseover and leave not working MAT-MENU

Question

I have a mat-sidenav and a list of mat-item and mat-menu. Then when I hover over of one of the items I want the menu to display. This part is working. But then when I move off of that menu or item and over a new item I want its menu to display.

https://stackblitz.com/edit/angular-xsscrm

I have included a stackblitz with a demo of the behavior.

What is wrong here I have both on enter and exit, but then when I leave a menu on to a new one, it doesnt open unless I click on it.

Thanks for the help

Answer 1

The issue here is that when a menu opens, it creates an overlay with a backdrop that overlaps all elements. This backdrop is causing the mouse events to not be 'seen' by the listening element until the overlay is dismissed via a mouse click. Luckily, the menu control has a flag to remove the backdrop; setting this to false fixes the issue you're seeing.

Side note: you have an *ngFor on the <mat-list> element, but I think you want to move it to the <mat-list-item> element instead because you want many list items, not many lists. Since you're using the local variable of *ngFor outside of the <mat-list-item> , you can create an <ng-container> element to house your *ngFor . See below stackblitz:

https://stackblitz.com/edit/angular-xsscrm-kx6jyd

Another side note: this behavior is similar to a tooltip. Perhaps that would be a better control for your use-case? https://material.angular.io/components/tooltip/overview