打开模式后自动打开时，Mat-select 不会箭头导航答案

【问题标题】：Mat-select won't arrow navigate when auto-opened after opening a modal打开模式后自动打开时，Mat-select 不会箭头导航
【发布时间】：2021-03-20 01:40:00
【问题描述】：

我有一个位于模态中的 mat-select。目前我已经设置了它，以便在打开模式后，它将在 mat-select 上运行 open() 以便展开选择列表，但是这样做时我无法使用向上和向下箭头键来导航列表，如你通常会，除非我先点击标签，所以这似乎是某种焦点问题。

此代码在模态打开后打开 mat-select 列表。

this.dialogRef.afterOpened().pipe(takeUntil(this.ngUnsubscribe)).subscribe(() => {
      if (this.exampleSelect) {
        this.exampleSelect.open();
      }
 });

这是有问题的垫子选择

<mat-form-field appearance="outline">
            <mat-select  #exampleSelect formControlName="exampleSelect" ariaLabel="Example Selector" required>
              <ng-container *ngFor="let exampleSelectOption of exampleSelectOptions">
                <mat-option [value]="exampleSelectOption.value">
                  {{ exampleSelectOption.description }}
                </mat-option>
              </ng-container>
            </mat-select>
 </mat-form-field>

【问题讨论】：

标签： angular angular-material focus

【解决方案1】：

在打字稿处添加@ViewChildren("option") options: QueryList<ElementRef>;。

更改 if 语句为：

if (this.exampleSelect) {
    this.exampleSelect.open();
    this.exampleSelect._elementRef.nativeElement.focus();
    this.options.toArray()[0].nativeElement.focus();
}

添加 #optionmat-option

<mat-option #option [value]="exampleSelectOption.value">
    {{ exampleSelectOption.description }}
</mat-option>

您也可以尝试跳线：this.exampleSelect._elementRef.nativeElement.focus();

它可能会起作用。不是 100% 确定。

【讨论】：