MatChipList 选项卡导航答案

【问题标题】：MatChipList tab navigationMatChipList 选项卡导航
【发布时间】：2021-01-25 04:52:14
【问题描述】：

我有一个包含芯片列表的 mat-form-field，另一个包含任何其他类型的输入。我希望能够从芯片列表导航到输入字段并进入以下 mat-form-fields，但似乎不支持这种行为。有没有人可以解决这个问题，以便能够使用选项卡导航此组件？

<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList>
    <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
             [removable]="removable" (removed)="remove(fruit)">
      {{fruit.name}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input placeholder="New fruit..."
           [matChipInputFor]="chipList"
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
</mat-form-field>
<mat-form-field>
  <input placeholder="Another unrelated field" matInput>
</mat-form-field>

示例：https://stackblitz.com/edit/angular-ixswwc?file=app/chips-input-example.html

【问题讨论】：

Tab 确实离开了芯片列表 - 但进入了输入。您可以在<mat-chip-list> 或<input> 上使用tabIndex="-1"，标签将转到另一个组件。

标签： angular-material

【解决方案1】：

因为<input> 在<mat-chip-list> 内部，所以会发生焦点无限循环

可以通过以下方式解决

<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList>
    <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
             [removable]="removable" (removed)="remove(fruit)">
      {{fruit.name}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    
  </mat-chip-list>
<input placeholder="New fruit..."
           [matChipInputFor]="chipList"
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="add($event)">
</mat-form-field>
<mat-form-field>
  <input placeholder="Another unrelated field" matInput>
</mat-form-field>

【讨论】：

这种情况下怎么办？我也面临同样的问题
@Hope 我编辑我的答案更明确。