MatChipList tab navigation

Question

I have a mat-form-field that contains a chip list and another one that contains any other kind of input. I want to be able to navigate away from the chip list into the input field and into the following mat-form-fields but it seems like this behaviour is not supported. Does anyone have a work around for this to be able to navigate this components with tab?

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

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

Tab does leave the chip list - but goes into the input. You can use tabIndex="-1" on either <mat-chip-list> or <input> and tab will go to the other component instead. — G. Tranter

crlsktr crlsktr · Accepted Answer · 2019-06-10T17:03:11

The infinite loop of focus happens because the <input> is inside of the <mat-chip-list>

It could be solved by doing the following

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

MatChipList tab navigation

1 Answers