Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
moniuch opened this issue May 2, 2025 · 1 comment
Open
Labels
area: material/menu feature This issue represents a new feature or feature request rather than a bug or bug fix P5 The team acknowledges the request but does not plan to address it, it remains open for discussion

Comments

@moniuch
Copy link

moniuch commented May 2, 2025

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"

@moniuch moniuch added feature This issue represents a new feature or feature request rather than a bug or bug fix needs triage This issue needs to be triaged by the team labels May 2, 2025
@crisbeto crisbeto added P5 The team acknowledges the request but does not plan to address it, it remains open for discussion area: material/menu and removed needs triage This issue needs to be triaged by the team labels May 2, 2025
hahaym6164 added a commit to hahaym6164/angularComponents that referenced this issue May 5, 2025
…rigger pressed state angular#31014

angular#31014, by adding css to class 'stay-open-while-press' and receive attributes input [pressedWhileOpen]="true" on triiger button
hahaym6164 added a commit to hahaym6164/angularComponents that referenced this issue May 5, 2025
…rigger pressed state angular#31014

angular#31014, by adding css to class 'stay-open-while-press' and receive attributes input [pressedWhileOpen]="true" on triiger button
@hahaym6164
Copy link

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
Labels
area: material/menu feature This issue represents a new feature or feature request rather than a bug or bug fix P5 The team acknowledges the request but does not plan to address it, it remains open for discussion
Projects
None yet
Development

No branches or pull requests

3 participants