Навигация по вкладке MatChipList

Question

У меня есть поле mat-form-field, которое содержит список микросхем, и еще одно, которое содержит любые другие виды ввода. Я хочу иметь возможность перейти от списка микросхем к полю ввода и к следующим полям mat-form, но кажется, что это поведение не поддерживается. У кого-нибудь есть способ обойти это, чтобы иметь возможность перемещаться по этим компонентам с помощью вкладки?

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