matMenu nesting button components mat-menu-item is not inheriting button functionality

Question

Hi I am using Angular v12 and Material v12

I have the following code:

@Component({
  selector: 'app-alert-display',
  templateUrl: './alert-display.component.html',
  styleUrls: ['./alert-display.component.scss'],
})
export class AlertDisplayComponent {


  constructor(
  ) {  }


}

html

    <button mat-stroked-button [matMenuTriggerFor]="appMenu" color="primary">Actions
          <mat-icon>arrow_drop_down</mat-icon></button>
    <mat-menu #appMenu="matMenu">      
          <app-alert-update></app-alert-update>         
          <button mat-menu-item>
            <mat-icon>get_app</mat-icon>
            <span>Export</span>
          </button>
          <button mat-menu-item>
            <mat-icon>get_app</mat-icon>
            <span>Export</span>
          </button>
          <button mat-menu-item>
            <mat-icon>get_app</mat-icon>
            <span>Export</span>
          </button>
    </mat-menu>

the code for the app-alert-update

@Component({
  selector: 'app-alert-update',
  templateUrl: './alert-update.component.html',
  styleUrls: ['./alert-update.component.scss'],
  providers: [{ provide: MatMenuItem, useExisting: AlertUpdateComponent }],
})
export class AlertUpdateComponent {

  constructor(
  ) { }

}   

html

    <!-- app-alert-update html -->
    <button mat-menu-item 
      (click)="openDialog()" 
      [disabled]="isDisabled" 
      >
      <mat-icon>notification_important</mat-icon>
      <span>Update Alert</span>
    </button>

Question: When using the keyboard up and down arrows after the menu is open the focus skips the app-alert-update component. Is there a way to fix this?

Thanks in advance.

Answer 1

I'm not sure, but you can try to use mat-menu-item attribute on your <app-alert-update>. Sorry if it's not working... this is just a guess