Material Menu Focus Issue Fixed,Material Menu,MatMenuModule,Focus Issue

Material Menu Focus Issue Fixed

Code Action @ StackBlittz

Use of stopPropagation

The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.

Step 1: Throwback 

Refer Angular step and step & Refer Angular Material.

Step 2: Dependencies

Add below to App.Module.ts

import {MatMenuModule} from '@angular/material/menu';

Step 3: Add below Code To HTML 

<button mat-icon-button [matMenuTriggerFor]="menu">
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu"  >
  <button mat-menu-item (click)="$event.stopPropagation();focustoinput1();"  >
    <span>Focus to Input 1</span>
  </button>

  <button mat-menu-item (click)="$event.stopPropagation();focustoinput2();" >
    <span>Focus to input 2</span>
  </button>
</mat-menu>
<input id="input1" (focus)="focusedoninput1()" />
<input id="input2"  (focus)="focusedoninput2()"/> 

Your Design will Be

Step 4: Add Below Code to Corresponding Component

import {MatMenuTrigger} from '@angular/material';

export class MenuIconsExample {
@ViewChild(MatMenuTrigger) matmenu: MatMenuTrigger;
  focustoinput1() {
    this.matmenu.closeMenu();
    document.getElementById('input1').focus();
}
focustoinput2() {
    this.matmenu.closeMenu();
    document.getElementById('input2').focus();
}
  focusedoninput1() {
    console.log('focused on input 1');
  }
  focusedoninput2() {
    console.log('focused on input 2');
  }
}

Step 5: Run the Project And See the Result