bug(mat-menu): Overlapping nested menu item will accidentally trigger after click on parent

[tenonedesign]

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

14.2.7

Description

In a space constrained layout, submenus will occasionally overlap with parent menus. When clicking a parent item with the intention of opening a submenu, the submenu will appear over the parent item and seem to receive a mouse event, thereby selecting it. This behavior is unexpected and could lead to accidental user actions.

Reproduction

Steps to reproduce:

1. https://material.angular.io/components/menu/examples
2. Pick mat-menu
3. In dev tools set screen to 256px wide
4. Click nested menu -> Animal index -> click near arrow on vertebrates
5. Mammals will be selected accidentally (see gif below)

Expected Behavior

Submenu should not have an item selected as a result of a click on its parent.

Actual Behavior

Submenu has an item selected as a result of a click on its parent.

Environment

• Angular: 15.0.4
• CDK/Material: 15.0.3
• Browser(s): Chrome latest
• Operating System (e.g. Windows, macOS, Ubuntu): macOS latest

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}