Search code examples
angularangular-materialangular2-templateangular-animations

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

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!

Solution

  • 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