Description
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"