angular-material - MatChipList 选项卡导航

Question

我有一个包含芯片列表的 mat-form-field 和另一个包含任何其他类型输入的 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

Answer 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>