Mobile: Click event is fired when Nested MatMenu is hidden

[hisomu]

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

[manklu]

Via device toolbar it's reproducible on desktop too.

[crisbeto]

I don't think I get what the issue is exactly. Can you post a step-by-step on how to reproduce it?

[manklu]

@crisbeto Steps for Chrome on desktop

1. Open https://angular-aor8v8.stackblitz.io/
2. Open developer tools and switch to a small device. e.g Galaxy S5
3. Click 'Site Index'
4. Click at the marked spot

Instead of the submenu CNN opens.

[angelaki]

Am I just facing this in a weird context or is this actually still happening? Handling a click on a submenu that gets executed immediatelly on showing the submenu if they overlap (mobile).

Edit: in case the Angular Team (or anyone else finding this) is interested: in my case removing an @if around the element containing the matMenuTriggerFor solved the issue.