Skip to content

bug(matMenuTriggerFor): nested menu element is activated right away if it appears above its trigger #30888

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
1 task
johannesjo opened this issue Apr 16, 2025 · 4 comments
Labels
needs triage This issue needs to be triaged by the team

Comments

@johannesjo
Copy link

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When a nested menu element appears above its trigger mat-menu-item it is activated right away.

Reproduction

StackBlitz link: https://stackblitz.com/run?file=src%2Fapp%2Fmenu-nested-example.ts
Steps to reproduce:

  1. Make the window small enough for the nested menu to appear above the trigger (e.g. using chrome dev tools).
  2. Tap (!) the menu trigger

Expected Behavior

The menu is opened, but the item is not activated

Actual Behavior

The menu is opened, but closed right away with the item below the cursor activated

Environment

  • Angular: 19 (happens in earlier versions too)
  • CDK/Material: 19
  • Browser(s):
  • Operating System (e.g. Windows, macOS, Ubuntu):
    all of them
@johannesjo johannesjo added the needs triage This issue needs to be triaged by the team label Apr 16, 2025
@SergheiGurgurov
Copy link

@johannesjo I think there's a problem with the stackblitz link, it does not link to a valid project it just redirect's me to my own dashboard

@johannesjo
Copy link
Author

Weird. The link keeps doing that... It's just the standard nested example from the docs without why modifications:
https://material.angular.io/components/menu/examples

@SergheiGurgurov
Copy link

SergheiGurgurov commented Apr 19, 2025

ok, i think i'm able to reproduce it:

first of all, on a small enough screen the nested menus are gonna overlap with the parent menu as displayed in the following image:

Image

then if you are on a touch device, or browser mobile emulation this behaviour causes a problem.

you need to tap on a menu item to open it's submenu, but apparently the interaction gets also instantly captured by the submenu,

in the following image if i tap in the orange area on the parent menu item, it also instantly selects the sub-menu option and closes the menu altogether

Image

i dont't see any problems on pc since the nested menus open when the mouse is moved over them

@johannesjo
Copy link
Author

Thank you very much @SergheiGurgurov! That is much more clear than my explanation!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs triage This issue needs to be triaged by the team
Projects
None yet
Development

No branches or pull requests

2 participants