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-menu #menu="matMenu"  >
  <button mat-menu-item (click)="$event.stopPropagation();focustoinput1();"  >
    <span>Focus to Input 1</span>

  <button mat-menu-item (click)="$event.stopPropagation();focustoinput2();" >
    <span>Focus to input 2</span>
<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() {
focustoinput2() {
  focusedoninput1() {
    console.log('focused on input 1');
  focusedoninput2() {
    console.log('focused on input 2');

Step 5: Run the Project And See the Result

No comments

Post Top Ad

Post Bottom Ad