如何使用 Angular 中的 Tab 键从 mat 下拉列表中选择一个选项答案

【问题标题】：How to select an option from mat dropdown using Tab key in angular如何使用 Angular 中的 Tab 键从 mat 下拉列表中选择一个选项
【发布时间】：2020-07-24 16:01:25
【问题描述】：

我正在使用一个包含一些键和输入字段的下拉菜单。

目前，当我选择下拉菜单并按 Tab 键时，它将转到第二个下拉菜单。

我期望的行为是，在选择下拉菜单并按下选项卡按钮后，它应该选择下拉菜单中的下一项。

下面是显示我期望的行为的图像

这是我的代码

<div class="fromTo">
   <mat-form-field style="width: 30%;">
      <mat-label>From</mat-label>
      <mat-select panelClass="fromSelect" style="margin-top:10% ;">
         <input matInput [(ngModel)]='searchValue' placeholder="Search" style="height: 35px; background-color: #f3f5f8; width: 98%;"/>
         <button mat-icon-button matSuffix (click)="onKeyAgency(searchValue)" class="cursor-pointer" type="button" style="float: right;position: absolute; right: 0;">
            <mat-icon class="search_icon">search</mat-icon>
         </button>
         <button mat-button (click)="showAdd=!showAdd" style="width: 100%;text-align: left;"><mat-icon>add</mat-icon>   Add New</button>
         <input matInput [ngClass]="{ 'hide':  showAdd}" [(ngModel)]='newPlace' placeholder="add" style="height: 35px; background-color: #f3f5f8; width: 98%;  position: inherit; "/>
         <button mat-icon-button matSuffix (click)="addPlace(newPlace)" [ngClass]="{ 'hide': showAdd }" class="cursor-pointer" type="button" style="float: right; position: absolute; right: 10%;">
            <mat-icon class="search_icon">done</mat-icon>
         </button>
         <button mat-icon-button matSuffix (click)="newPlace=''" [ngClass]="{ 'hide': showAdd }" class="cursor-pointer" type="button" style="float: right; position: absolute; right: 0;">
            <mat-icon class="search_icon">close</mat-icon>
         </button>
         <mat-option>None</mat-option>
         <mat-option *ngFor="let places of selectedAgencies" [value]="places">{{places}}</mat-option>
      </mat-select>
   </mat-form-field>
</div>

【问题讨论】：

您是否尝试过将tab index 分配给每个选项？
我尝试将选项卡索引添加到选项，但它不起作用
添加标签索引后它被选中但下拉菜单被关闭

标签： javascript html angular angular-material

【解决方案1】：

在模板中的以下选项中添加tabindex -

 <div class="fromTo">
       <mat-form-field style="width: 30%;">
             <input (keydown)="onKeydown($event)" />
             <mat-option>None</mat-option>
              <!-- Add table index to matOptions-->
             <mat-option *ngFor="let places of selectedAgencies;let i = index" [value]="places" tabindex="index">{{places}}</mat-option>
          </mat-select>
       </mat-form-field>
    </div>

然后在您的组件中，将输入字段中的keydown 事件绑定到您组件中的回调。这应该可以避免面板关闭 -

onKeydown(event) {
  if (event.keyCode === 9) {
       event.stopPropagation();
    }
}

【讨论】：