angular - How to open mat-menu on a single click and close other opened menu if there is any?

Question

I am stuck on this issue that when there a header multiple menu's and when i open a menu first time there is no issue but if there is already a menu opened and i click to open a second menu it doesn't work. it will first close the previously opened menu and then we have to click again to open the new menu.

What i want is that when i click on a menu it should open in a single click and if there is any menu opened, it closes too. I haven't found any thing regarding this in angular2 material documentation.

Below is the link for the sample of that issue:

https://stackblitz.com/edit/angular-8ntb2i

Answer 1

There is no easy way to solve this issue, because when menu opens, the fullscreen overlay apllies too. The overlay is intended to detect click, then close menu and remove the overlay. As you already guessed, this overlay prevent clicks on another menu trigger and we can't open the menu, when another one is already opened.

As a workaround you can do something like this:

Catch click event on the overlay, get x and y axis, and after the overlay will be removed, you can check, does user want to click on another menu (you can use method from this post), and if so, simulate another one click at the same axis.