How to close mat-menu on mouse leave - it starts flickering

Question

I am using mat-menu, I am displaying a menu when the mouse enters the event for a specific button.it works fine.

But I want to close mat-menu when the mouse leaves the button. it is not working.

Please fin sample in below:

Reproduce steps

open the above sample
hover home icon, you can see menu popup gets opened
move away before entering menu, you can see menu popup not get closed
sample - https://stackblitz.com/edit/example-angular-material-toolbar-menu-vrobtz?file=app%2Fapp.component.html

Note - I have tried to use mouse-leave for that button but it start flickering

Please [check here](https://stackoverflow.com/questions/53618333/how-to-open-and-close-angular-mat-menu-on-hover) — JsNgian, Aug 29 '21 at 05:05

score 0 · Answer 1 · answered Aug 28 '21 at 18:09

0

you have to just remove the highlighted one in the image remove one mouse leave event.

answered Aug 28 '21 at 18:09

if I remove that, the menu popup won't close if I hover the mouse on that button and don't go to the menu popup.Just remove that marked code and try to hover that home icon menu popup will open and don't goto menu popup and go other body, you can see popup wont close – Kumaresan Sd Aug 29 '21 at 13:56