How to set auto focus in mat-select?

16,350

Solution 1

If I understand it correctly, you want to focus select element on load. If this is the case, your code is perfectly fine, you just need to move focus logic in to another life cycle event which is

ngAfterViewInit

HTML:

<mat-select #fff>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
</mat-select>

TS:

export class SelectOverviewExample  implements AfterViewInit{
  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

  @ViewChild("fff", {static: false}) nameField: ElementRef;

  ngAfterViewInit() {
    this.nameField.focused = true;
  }
}

Find working demo here. You can see select is highlighted. comment code inside ngAfterViewInit() and see this difference.

Solution 2

HTML :

<mat-select #someRef >
    <mat-option *ngFor="let item of items;" [value]="item">
    {{item.name}}
    </mat-option>
</mat-select>

.ts : make sure you import MatSelect

import { MatSelect } from '@angular/material';
@ViewChild('someRef') someRef: MatSelect;


ngOnInit() {
    if(this.someRef) this.someRef.focus();
}

Hope this helps.

Solution 3

We can use default angular attribute for autofocus

<mat-form-field>
    <mat-select formControlName="xyz" cdkFocusInitial>
        <mat-option value="abc">Abc</mat-option>
    </mat-select>
</mat-form-field>

Solution 4

As this is the First hit that shows up on Google I'll provide what I found:

Note that I did this specifically for a mat-select as there is no real inner html element that the reference could be attached to.

What I found works is getting a reference to the element through view-child and then calling

reference._elementRef.nativeElement.focus();

Hope this helps at least someone :)

Solution 5

Try using MatSelect on viewChild to access focused attribute, then onInit set it to true.

<mat-form-field>
  <mat-select #mySelect [(ngModel)]="nameField">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }} 
    </mat-option>
  </mat-select>
</mat-form-field>

and ts file import import { MatSelect } from '@angular/material';

import { MatSelect } from '@angular/material';

export class SelectExample implements OnInit {
  @ViewChild(MatSelect) mySelect: MatSelect;

  ngOnInit() {
    this.mySelect.focused = true;
  }  
}
Share:
16,350

Related videos on Youtube

BlueCloud
Author by

BlueCloud

proud myself because a software developer

Updated on July 06, 2022

Comments

  • BlueCloud
    BlueCloud over 1 year

    In my angular project have angular material and use mat-select. Mat-select is the first element for my form in my case set auto focus while page was loaded successfully but I wasn't able to set auto focus on mat-select. Anyone can help me to find the way to set auto focus in mat-select.

    @ViewChild("name") nameField: ElementRef;
    
    ngOninit() {
      this.nameField.nativeElement.focus();
    } 
    

    html

    <div>
     <mat-select [(ngModel)]="nameField" #name>
        <mat-option *ngFor="let option of options2" [value]="option.id">
          {{ option.name }}
        </mat-option>
     </mat-select>
    </div>
    
  • Heretic Monkey
    Heretic Monkey almost 5 years
    Providing a link to an answer is not a good way of answering a question. Please include the relevant code, if the site's license allows, here on Stack Overflow. You can likely use Stack Snippets to provide a runnable snippet.
  • BlueCloud
    BlueCloud almost 5 years
    I already tried that way but its not working its only working for input elements not for mat-select
  • BlueCloud
    BlueCloud almost 5 years
    I already tried that way but its not working its only working for input elements not for mat-select
  • Elias
    Elias over 4 years
    This in incorrect AFAIK. It sets the style to focused but this not actually focuses the element!
  • pcnate
    pcnate about 4 years
    best to add a truthy check on this.someRef
  • BlueCloud
    BlueCloud about 4 years
    Thanks @Harshad vekariya , it's working fine as expected
  • j2L4e
    j2L4e over 3 years
    Caveat: cdkFocusInitial doesn't do anything on its own. It will only work inside an element with the cdkTrapFocus directive on it.
  • kazbeel
    kazbeel over 3 years
    Using ElementRef on Angular 9 did not work to me, but MatSelect did the trick. Thanks.
  • Soumya Gangamwar
    Soumya Gangamwar over 3 years
    How it works for ngFor.. I want to focus 0 index mat dropdown