Components: Menu doesn't stay open on iOS devices

[nielsheeren]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Menu stays open like it does on other devices

What is the current behavior?

On iOS the menu closes directly after it's opened when there are more items in the menu than fit on the screen.

Check: https://youtu.be/2hJMPr0Z14w (sorry for the quality but behavior is visible)

What are the steps to reproduce?

• Open https://mat-menu-overflow.stackblitz.io/ on an iOS device
• Click on "Menu"

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

Material 6.0.2
iOS 11.2.5

Is there anything else we should know?

The element is still in the DOM but somehow not visible anymore and when you set a breakpoint at some point in the MatMenuTrigger code and continue it works as expected.

[kdcro101]

@nielsheeren ,

Problem is in zone-js support for rxjs 6. Not angular/material.

Adding import into polyfills.ts fixes problem.

import "zone.js/dist/zone-patch-rxjs";

[jackcw]

@nielsheeren @kdcro101 I found that the polyfill didn't work but if you use the lazy rendering method as listed in the docs the menu stays open

[JNaeemGitonga]

seems like this is back on iOS 13.1.3. @jackcw lazy loading did not fix it here. Any suggestions?

[squelix]

I have the same issue with IOS 13 :/

[octavian-mirica]

I have the same issue when asynchronously loading items in the menu AFTER it was opened. The menu just closes immediately after opening. The weird thing is that it's happening only in Firefox at my side, it works fine in Chrome and Edge.

After some investigations, I think it's related to the menu losing the focus and that's why it's closing automatically.
Unfortunately I wasn't able to find a fix or workaround yet.