Skip to content

feat(MENU): Native material way to maintain MatMenuTrigger pressed state #31014

Open
@moniuch

Description

@moniuch

Feature Description

I'd love it if MatMenuTrigger had a way to persist the pressed state of the button while the linked menu is open.

I know how to achieve that via a template reference or via a custom directive. This is not my concern.
My concern is how you need to override css in order to achieve the styling for this pattern.

Use Case

My goal is to avoid custom selector overrides, digging into pseudo elements etc. as it make the project susceptible to any internal naming changes etc.

Below is the minimal fix that I am using currently (maybe there's a better solution, IDK)

button.mat-mdc-menu-trigger[aria-expanded="true"] {
  .mat-mdc-button-persistent-ripple.mdc-icon-button__ripple:before {
    opacity: var(--mat-icon-button-pressed-state-layer-opacity);
  }
} 

This is basically overriding material's identical selector:

opacity: var(--mat-icon-button-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity))

and even if you choose to make your own directive that injects MatMenuTrigger on host, listens to the events and appends a custom class, you'd still have to define this custom class more or less like in the example. And I see this css override too internal and problematic. Therefore I would love it if material could come to the rescue and do what it can natively, such as - maybe - add an input [pressedWhileOpen]="true"

Metadata

Metadata

Assignees

No one assigned

    Labels

    P5The team acknowledges the request but does not plan to address it, it remains open for discussionarea: material/menufeatureThis issue represents a new feature or feature request rather than a bug or bug fix

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions