Skip to content

bug(MatMenu): Opening as context menu ignores hasBackdrop #32350

@oBusk

Description

@oBusk

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

In a place where we define a matMenu, and allow it to be open via a button (matMenuTriggerFor), and then the entire element also works as a context trigger matContextMenuTriggerFor, it get's a little strange that the behaviours do not align.

The context menu cannot have a backdrop, as far as I can tell, because of a intentional implementation, but still closes when click outside. matMenuTriggerFor follows the hasBackdrop setting on the matMenu element, but if you don't have a backdrop, will not automatically close when you click outside.

I can undestand that the default behaviour of matContextMenuTriggerFor should be to not have a backdrop, and close when you click elesewhere, but the fact that the hasBackdrop configuration is on the matMenu element itself, makes it counter-intuitive. There is a setting that the documentation states will decide if the menu has a backdrop, but if it's opened via context menu, that config is ignored.

I suggest that:

  1. matContextMenuTriggerFor allows backdrop, but in cases where the setting is not defined, uses no backdrop as a default.
  2. matMenuTriggerFor adopts the same "click outside" to close, even when there's no backdrop.

Reproduction

StackBlitz link: https://stackblitz.com/edit/context-menu-backdrop?file=src%2Fmain.ts
Steps to reproduce:

  1. Clicking the button opens as a menu (with backdrop)
  2. Rightclicking the context hook opens as a context menu (without backdrop)

Expected Behavior

  • matContextMenuTriggerFor opens without backdrop, regardless of matMenu.hasBackdrop setting.
  • matMenuTriggerFor does not close on click outside when opened without a backdrop

Actual Behavior

  • matContextMenuTriggerFor opens without backdrop by default, but can have backdrop if mat-menu has hasBackdrop.
  • matMenuTriggerFor supports closing when click outside (probably opt-in behaviour to avoid breakages)

Environment

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/menu

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions