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"

Activity

added
featureThis issue represents a new feature or feature request rather than a bug or bug fix
needs triageThis issue needs to be triaged by the team
on May 2, 2025
added
P5The team acknowledges the request but does not plan to address it, it remains open for discussion
and removed
needs triageThis issue needs to be triaged by the team
on May 2, 2025
hahaym6164

hahaym6164 commented on May 5, 2025

@hahaym6164

Hello, I'm a new contributor to this project.

This is my first time working on the open resource project, I did minimal change as I could.
I'm not sure if I'm allowed to directly work on this issue, but I saw the contributor's documentation when I half done, so I finished it and create a pull request if i cannot get approved on this, it is totally fine.

I added a variable called _pressedWhileOpen default false, the setter will detect if it passed a true value. if [pressedWhileOpen]="true" this is detect on the trigger button for menu, the button will stay the pressd state when menu is opened.

It is rejected for me not signing CLA agreement yet. I just signed it but I think I can share you the PR link first.
#31026

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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

      feat(MENU): Native material way to maintain MatMenuTrigger pressed state · Issue #31014 · angular/components