Option for menu not to return focus to the assoicated button

Feature request:

An @Input() option for not returning focus to the associated button when the menu closes.

What is the expected behavior?

When the menu closes, not to return the focus to the button. This could be an optional behavior.

What is the current behavior?

When the menu closes after clicking a menu item, the focus returns to the associated button. However, if the command of the menu item is to focus on an input element, current behavior just breaks the intended feature which for example enables editing in the input box right away.

What are the steps to reproduce?

With the tutorial link at https://stackblitz.com/angular/pbndqaomepr?file=app%2Fmenu-overview-example.html

Copy and paste the following:

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item (click)="focusInput()">Focus Input</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>
<p>a</p>b<p></p>
<button mat-raised-button (click)="focusInput()">Focus Input</button>
<p>c</p><p></p>d<p></p>

    <mat-form-field fxFlexFill>
        <textarea matInput placeholde="MyInput" #textDetail name="note" ></textarea>
    </mat-form-field>

import {Component, ElementRef,ViewChild} from '@angular/core';

/**
 * @title Basic menu
 */
@Component({
  selector: 'menu-overview-example',
  templateUrl: 'menu-overview-example.html',
  styleUrls: ['menu-overview-example.css'],
})
export class MenuOverviewExample {
  	@ViewChild('textDetail') noteInput: ElementRef;


focusInput(){
  (this.noteInput.nativeElement as HTMLTextAreaElement).focus();
}
}

In contrast, when running the same command focusInput() in the button, the input box gets focused as expected.

What is the use-case or motivation for changing an existing behavior?

Menu command to focus on any element that can be focused. For example, adding or editing some text in an input box.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.0.4, Angular Material 6.2.1, TypeScript 2.7.2

Chrome and other browsers

Is there anything else we should know?

At the moment, the workaround is to use

focusInput(){
  setTimeout(()=> (this.noteInput.nativeElement as HTMLTextAreaElement).focus(), 
       280);
}

280ms is for Chrome, but for Edge, the delay has to be around 400 ms. Anyway, people with eagle eyes could see the blinking of the focus changing.

[VVKot]

Hi @crisbeto, can I reopen this? It would be great to have such an option. Maybe we can mark the menu element to not return focus it is not feasible for the menu as a whole?

We have some use cases when we want to set focus on our own, for example, menu option to rename element(double-click is reserved for other interaction).

[vijaynet10]

hi zijianhuang, refer this https://stackblitz.com/edit/angularmaterialmenufocusissue