Angular Mat Select 显示键盘焦点和鼠标悬停焦点的问题

Question

在此发布此内容是为了避免其他人头痛。

当未设置初始值时，Angular 会自动关注第一个可用选项。这可能会让用户感到困惑，因为它显示了第一个选项的焦点以及悬停的焦点选项（同时有两个焦点选项）。在网上研究后，针对这个困境有大量臃肿且无法获得的答案。

Answer 1

我发现您可以通过添加带有 style="display:hidden" 的隐藏选项并将其设置为 Mat Select 的默认值，在悬停时显示焦点并保持键盘焦点/控件。

现在所有选项最初都未选择，并且只会显示悬停选项的焦点。如果用户按选项卡或使用键盘控制，焦点将保留在“Mat Select”内，并且可以像键盘一样访问。

希望这可以帮助遇到同样问题的人！

//HTMl
      <mat-form-field>
        <mat-label>Select</mat-label>
        <mat-select #mySelect value="initialSelection">
          <mat-option value ="empty" style="display: none;"></mat-option>
          <mat-option *ngFor="let selection of selections" [value]="selection.selectionId"> 
            {{ selection.selectionId }}
          </mat-option>
        </mat-select>
      </mat-form-field>

//TS

  public initialSelection = 'empty';