Угловая фокусировка на выбранном элементе

Question

Я пытаюсь программно сфокусироваться на элементе select с angular. Вот мой код:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@ViewChild('microwaveRef') microwaveElement: ElementRef
this.microwaveElement.nativeElement.focus()

На стороне HTML:

<mat-form-field class='login-full-width'>
    <mat-label>Microwave</mat-label>
    <mat-select #microwaveRef [formControl]="microwaveFormControl" required>
        <mat-option *ngFor="let option of microwave" [value]="option">
            {{option}}
        </mat-option>
    </mat-select>
    <mat-error *ngIf='microwaveFormControl.hasError("required")'>
        Please select an option for the Microwave field
    </mat-error>
</mat-form-field>

Это хорошо работает с полем ввода текста, но при выборе я получаю эту ошибку:

ERROR TypeError: Cannot read property 'focus' of undefined

Любая помощь будет высоко ценится

Answer 1

Не определено, потому что nativeElement не существует непосредственно на mat-select. Альтернативой является использование свойства focused в mat-select и установка его в true самостоятельно:

this.microwaveElement.focused = true

Я предоставил Stackblitz пример, чтобы продемонстрировать это.

---

Edit:

На самом деле, mat-select имеет собственную функцию focus(), поэтому вы можете использовать:

this.microwaveElement.focus();

Или даже:

this.microwaveElement.open();