How to stay focus/active on button after click to open mat-menu in Angular Material?

0
votes

I have problem with focus in Angular Material. When I want open mat-menu, button after click is not actived or focused, and has default color. After closed mat-menu, button is again focused/activated. Where is the problem?

Example source:

https://stackblitz.com/edit/angular-focus-after-click-to-open-mat-menu?file=src%2Fapp%2Fapp.component.html

How can I resolve this problem? Thanks!

1
angularangular-materialangular2-templateangular-animations

1 Answers

0
votes

What you need is to use events of mat-menu. You can simply trick by applying class when menu is open.

<button mat-icon-button [matMenuTriggerFor]="menuUserPhoto" class="user-photo__btn" #t="matMenuTrigger" [class.opened]="t.menuOpen">

CSS

.opened {
   background: darkcyan;
   color: white;
   opacity: 1;
}

Working stackblits as follows.

https://stackblitz.com/edit/angular-focus-after-click-to-open-mat-menu-9wbhv5?file=src%2Fapp%2Fapp.component.html