Mobile: Click event is fired when Nested MatMenu is hidden

[hisomu]

trafficstars

What is the expected behavior?

In mobile, clicking anywhere on the parent navigation mat-menu should only execute the sub menu. Then click on the submenu, with a routerLink, to see another page.

What is the current behavior?

In mobile, if the sub-menu overlaps the parent mat-menu the routerLink in the sub-menu gets executed, even when the sub-menu is hidden.

What are the steps to reproduce?

In a mobile device go to: https://angular-aor8v8.stackblitz.io/ Source: https://stackblitz.com/edit/angular-aor8v8?file=app%2Fnested-menu-example.html Example: http://recordit.co/JopTv4JWTU

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 7.1.1 Material 7.1.1 Chrome

Is there anything else we should know?

I tried the lazy rendering with matMenuContent and it didn't seem to have any affect. Also, tested on an iOS device and it works perfectly fine