How to set auto focus in mat-select?
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;
}
}
Related videos on Youtube
Comments
-
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 almost 5 yearsProviding 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 almost 5 yearsI already tried that way but its not working its only working for input elements not for mat-select
-
BlueCloud almost 5 yearsI already tried that way but its not working its only working for input elements not for mat-select
-
Elias over 4 yearsThis in incorrect AFAIK. It sets the style to
focused
but this not actually focuses the element! -
pcnate about 4 yearsbest to add a truthy check on
this.someRef
-
BlueCloud about 4 yearsThanks @Harshad vekariya , it's working fine as expected
-
j2L4e over 3 yearsCaveat:
cdkFocusInitial
doesn't do anything on its own. It will only work inside an element with thecdkTrapFocus
directive on it. -
kazbeel over 3 yearsUsing
ElementRef
on Angular 9 did not work to me, butMatSelect
did the trick. Thanks. -
Soumya Gangamwar over 3 yearsHow it works for ngFor.. I want to focus 0 index mat dropdown