Angular материальный элемент боковой навигации сохраняет фокус после щелчка

Question

У меня есть боковая навигация по меню материалов, как показано ниже, каждый раз, когда я нажимаю на элемент меню, другие элементы меню становятся неактивными, пока я не щелкну за пределами панели навигации, прежде чем сработает эффект наведения или щелчка. Я пробовал такие решения, как:

• preventDefault
• [autoFocus] = "false"

ни один не работал

<mat-sidenav [autoFocus]="false" #sidenav [(opened)]="fullScreen" mode="side" class="fullScreen nav-bar" role="navigation">
  <div *ngIf="fullScreen" fxLayoutAlign="center center" class="logo">

  </div>
  <div *ngIf="!fullScreen" fxLayoutAlign="center center" class="logo">

  </div>
  <div class="scrollable">
    <mat-nav-list class="navigation-list mb-1" *ngFor="let item of menus">
      <a mat-list-item id="myNav" class="navigation-item" routerLinkActive="menu-active" [routerLink]="[item.route]" [matMenuTriggerFor]="main_menu" (click)="smallScreenToggle()">
        <mat-icon>{{item.icon}}</mat-icon>
        <span class="navigation-item-label ml-3">{{item.name}}
        </span>
        <span *ngIf="item.children">
          <mat-icon class="mySelect menu-select">arrow_drop_down</mat-icon>
        </span>
        <mat-menu #main_menu="matMenu" [class]="!item.children ? 'customClass' : ''">
          <ng-container *ngFor="let subItem of item['children']">
            <button mat-menu-item [routerLink]="[subItem.route]">{{ subItem.name }}</button>
          </ng-container>
        </mat-menu>
      </a>
    </mat-nav-list>


    <button mat-raised-button class="supportButton" [routerLink]="['/support']">
        Support
      </button>
  </div>



</mat-sidenav>

Answer 1

Я отвечу на вопрос, если кто-то наткнулся на это, имея такую ​​же проблему, добавьте атрибут hasBackDrop в mat-sidenav-container и установите для него значение false. ...