Components: Option for menu not to return focus to the assoicated button

[zijianhuang]

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.

[crisbeto]

Adding an option like this will break the accessibility of the menu, because it'll throw the user's focus back at the root when they close the menu. Closing the issue, because in general we don't add APIs that would inhibit accessibility. You should be able to hack around it, but at that point it would be up to you to maintain it.

[vijaynet10]

refer this
https://www.interfacecreator.com/2018/09/material-menu-focus-issue-fixed.html

[zijianhuang]

thanks vijaynet10. However, with the posted workaround, the menu is not closing, though the input does get focus. I had also tried to fire $event.stopPropagation() is menuClosed or closed events of the menu, not good either.

[vijaynet10]

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

[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]

yep ....you can reopen this issue @VVKot

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}