Angular material chips stop autofocus of mat-chips problem solution

Angular Material is very useful for designing your angular application, Angular material chip is one of the angular material features where you can add tags or chips inside the input field.

You can easily understand angular material chip by reading from this link https://material.angular.io/components/chips/overview

The main reason for writing this blog is sometimes these chips inside the input field get autofocus to the first chip and after focusing out from the input field and again clicking inside the input field it gets focused on the first chip or tag you added, and then you won’t be able to add another chip or tag. this is a very common issue but I was unable to find the solution at that time, after a lot of findings I got the solution on my own and now let me share this solution with you.

<mat-form-field class=“example-chip-list” appearance=“fill”>
  <mat-label>Favorite Vegitables</mat-label>
  <mat-chip-list #chipList aria-label=“Vegitable selection”>
    <mat-chip *ngFor=“let veg of vegitables” (removed)=“remove(veg)”>
      {{veg.name}}
      <button matChipRemove>
        <mat-icon>cancel</mat-icon>
      </button>
    </mat-chip>
    <input placeholder=“New Vegitable…”
           [matChipInputFor]=“chipList”
           [matChipInputSeparatorKeyCodes]=“separatorKeysCodes”
           [matChipInputAddOnBlur]=“addOnBlur”
           (matChipInputTokenEnd)=“add($event)”>
  </mat-chip-list>
</mat-form-field>

So you can see there is an input field where we add chips by writing some words and hitting enter and comma.

so the solution I am writing about is just removing this line

<mat-form-field class=“example-chip-list” appearance=“fill”>
 

and this also

</mat-form-field>

that’s it. now the autofocus issue to the first chip, when you click inside the input filed, is gone.

I know this is weird but that is the solution, maybe this will resolve incoming updates.

If you like this please share.