Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

mat-menu disappears after opening on mobile Safari

See original GitHub issue

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Menus open and stay open until dismissed

What is the current behavior?

Menus open for a split second and then disappear

What are the steps to reproduce?

This is only on 7.0.0-beta.0, I need a starter stackblitz for that version. Any basic menu should reproduce it.

What is the use-case or motivation for changing an existing behavior?

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

7.0.0-beta.0

Is there anything else we should know?

The issue goes away if you use lazy rendering, ie. ng-template with matMenuContent.

Issue Analytics

State:
Created 5 years ago
Reactions:5
Comments:19 (4 by maintainers)

Top GitHub Comments

7reactions

BovineEnthusiastcommented, Oct 15, 2019

Same issue here. Looks like it always works on the third click.

ezgif com-video-to-gif

0reactions

greg-larsoncommented, Aug 18, 2020

This is happening for me also and can be repoduced in the simulator. iOS 12.4 iPhone 5s

Need to click 3 times to keep the menu open. On angular / material 10.x

Top Results From Across the Web

my safari menu bar is missing - Apple Discussions

The menu bar for desktop, HD, and apps appears, but when I click on Safari, it disappears, so I can no longer see...

How to open and close Angular mat menu on hover

I'm in safari and this isn't working. When I move the mouse down from the initial trigger the triggered menu disappears. – Magnus....

How To Show Scrollbar On Mobile Safari In Mat-Select

UI component infrastructure and Material Design components for mobile and desktop is a form ... mat-menu disappears after opening on mobile Safari #13130....

Menu - Angular Material

By itself, the <mat-menu> element does not render anything. The menu is attached to and opened via application of the matMenuTriggerFor directive:.

Create a MatMenu with Checkboxes in JavaScript

The Angular Material MatMenu is a floating panel containing list of options ... menu” when the menu is open, as seen in the...