How to focus input element when Menu is opened?

Question

<button mat-button id="categories-button" [mat-menu-trigger-for]="categoryList">
  <span>categories</span>
  <mat-icon id="drop-arrow">arrow_drop_down</mat-icon>
</button>
<mat-menu #categoryList>
  <mat-form-field appearance="standard" id="category-search-wrapper">
    <input (click)="$event.stopPropagation()" matInput id="category-search">
  </mat-form-field>

  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Help</button>
</mat-menu>

I want category-search input to be focused, when Menu is opened, the problem is it doesn't seem to be ready yet, when menuOpened event is emitted. How can I focus input element when Menu is opened?

Since autofocus doesnt work, try out this answer: stackoverflow.com/questions/51510936/… — Mario Petrovic
– Mario Petrovic, Commented May 15, 2020 at 12:07
The problem is ngOnInit will be called only once on page load and not on each menu open — Gieted
– Gieted, Commented May 15, 2020 at 12:17
But isn't the mat-menu not in DOM when its closed? If so, it should fire cause that directive will be initiated every time input is inserted into DOM, that is if. — Mario Petrovic
– Mario Petrovic, Commented May 15, 2020 at 12:30
I'm not familiar enough with Angular to provide an example, but all frontend frameworks have the concept of tick() / nextTick( that runs your code next time the DOM updates. It's a solve for this exact problem. — Chris Hayes
– Chris Hayes, Commented Jun 12, 2022 at 15:59

Radik · Accepted Answer · 2020-05-15 13:13:47Z

3

you can use ViewChild as follow

<button mat-button
  (menuOpened)="menuOpened()"
  [matMenuTriggerFor]="menu">Menu
</button>

<mat-menu #menu="matMenu">
  <mat-form-field appearance="standard" id="category-search-wrapper">

    <input
      #search
      (click)="$event.stopPropagation()" matInput>

  </mat-form-field>

  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>


export class AppComponent  {

  @ViewChild('search', {static: false})
  inputElement: ElementRef;

  menuOpened() {
    setTimeout(() => {
      this.inputElement.nativeElement.focus();
    }, 0);
  }
}

example

answered May 15, 2020 at 13:13

Radik

2,7931 gold badge23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bfredo123 Over a year ago

Works great! also if the input is outside of the menu.

Avi Over a year ago

This works great for me too. However there is one small issue, if I type a letter in text box and if there is any mat-menu item (we have used button) starts with that letter, then the focus changes. In above StackBliz example if I type "i" then focus changes as mat-menu contains Item1, Item2. Any solution for this issue?

Raphaël Balet · Accepted Answer · 2022-09-30 07:02:18Z

3

<button
  id="categories-button"
  [mat-menu-trigger-for]="categoryList"
  (menuOpened)="categorySearch.focus()"
>
  <span>categories</span>
  <mat-icon id="drop-arrow">arrow_drop_down</mat-icon>
</button>
<mat-menu #categoryList>
  <mat-form-field #categorySearch appearance="standard" id="category-search-wrapper">
    <input matInput (click)="$event.stopPropagation()" />
  </mat-form-field>

  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Help</button>
</mat-menu>

Add (menuOpened)="this.categoryListOpened()" to the button, that opens the Menu
Declare categoryListOpened method in your component's class like above

edited Sep 30, 2022 at 7:02

Raphaël Balet

9,0998 gold badges65 silver badges118 bronze badges

answered May 15, 2020 at 12:33

Gieted

9257 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to focus input element when Menu is opened?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related