Skip to content

bug(cdk/menu): screen is freezing and becomes unresponsive when cdkContextMenuTriggerFor and cdkMenuTriggerFor is used together #30881

Open
@mistrykaran91

Description

@mistrykaran91

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

Currently, menu's appear on top of the preceding one when cdkContextMenuTriggerFor and cdkMenuTriggerFor are used simultaneously. Additionally, the screen freezes and becomes unusable if you continue with the reproduction stage; closing the browser tab is your only choice.

Image

One way : Adding a backdrop overlay, similar to what we have with mat-select, mat-autocomplete, etc., would be a one way but it will become annoying as we have click twice.

Reproduction

StackBlitz link: https://stackblitz.com/edit/o8qu6phn-szv21tzo
Steps to reproduce:

  1. Right click inside the red bordered div
  2. Left click immediately inside the red bordered div
  3. Repeat the above two step until the screen becomes unresponsive.

Expected Behavior

  • Menu's should not overlap each other
  • Screen should not freeze and become unresponsive.

Actual Behavior

  • Menu's are overlapping each other
  • Screen is freezing and becomes unresponsive.

Environment

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs triageThis issue needs to be triaged by the team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions