help(matMenu): Auto focusing text box after clicking on a menu item

[chenxinyanc]

What are you trying to do?

• I tried to move focus to a text box after user clicks the menu. This text box submits user input when it loses focus.
• I want to know what is the correct / recommended approach to move focus to other control, we I'm inside a menu item click callback.
• Is it possible for matMenu to stop moving focus to the triggering button when closing the menu, if user's focus is not inside matMenu at the time just before the menu closes? (something like Option for menu not to return focus to the assoicated button #11696, but with a pre-condition)

What troubleshooting steps have you tried?

I need to use setTimeout(..., 0) to defer moving focus to text box, so the focus will be moved to the menu-triggering button, then moved to the text box at last. However, this looks flaky to me and I'm not sure if it's the best practice.

Reproduction

https://stackblitz.com/edit/angular-component-mat-menu-focus?file=src%2Fapp%2Ftext-editor%2Ftext-editor.component.ts

Steps to reproduce:

1. Open the sandbox link above, note the following code in text-editor.component.ts.

  ngAfterViewInit() {
    // If we remove setTimeout, textInput.blur event will be triggered immediately.
    window.setTimeout(() => {
      // Move focus to the text box automatically.
      this.textInput.nativeElement.focus();
    }, 0);
  }

2. In the app, you can edit the text with "Edit" menu item. That's expected behavior.
   

3. Remove setTimeout, calling focus directly instead

  ngAfterViewInit() {
    // Move focus to the text box automatically.
    this.textInput.nativeElement.focus();
  }

4. In the app, the text box seems to get focus first, then lost focus almost immediately.
   

Environment

• Angular: 9.0.2
• CDK/Material: 9.1.0
• Browser(s): Chrome 80.0.3987.132
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[Totati]

Hi, there's any easy soulution for your problem. This is not a bug, it works as intended. MatMenu restores the focus by default, this is why you lost focus after focusing your input synchronously. There's an option to disable this beahaviour => matMenuTriggerRestoreFocus. With that your code works without setTimeout. StackBlitz

[chenxinyanc]

I see. That solves my problem. Thanks @Totati ! Then there is actually a solution to #11696. Just nobody can post it under that issue.

Then I have one last question: is it a valid feature request to add another option to "move focus back to trigger button only when the focus is not inside the menu before menu closes"? I think that would be of great help for my scenario, without any extra code to take care of accessibility.

[Totati]

@chenxinyanc #18756

[chenxinyanc]

If I understand this PR correctly, while it enables consumer to move focus to elsewhere in menuClosed event, it won't help for the case of moving focus inside click event of menu items (buttons)...

However, that makes it possible for consumer to manually restore focus after the menu closes, without accessibility implications, so it helps anyway 😃

[jelbourn]

Closing this since I think the combination of matMenuTriggerRestoreFocus and #18756 deals with this

[angular-automatic-lock-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.}