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.

Related Posts

angular icon

How to create Draggable Grid Blocks using angular-gridster2

To create Draggable Grid Blocks using angular-gridster2 first you need to Install the angular-gridster2 library by running npm install angular-gridster2 in your project’s root directory. You also…

angular vs react-min

What is the difference between Angular & React JS, Which one you should choose?

Angular & React JS both are use for Frontend Development, To make Single page applications or Web Apps. Here is a quick difference between both of them….

angular icon

What is Angular Framework? Why we use Angular and What are the Advantages and Disadvantages?

Hi Everyone, In this blog we will discuss about Angular Framework and this is going to be a brief blog about Angular and its pros and cons….

angular icon

Why toPromise is depricated and Explain other options like firstValueFrom and lastValueFrom methods

toPromise method is a method form Rxjs library, It is used to convert an observable to a promise. The toPromise method subscribe to observable and retrun the…

angular icon

How to use RxJS observables in Angular? How to subscribe services with reactive programming

RxJS is a library for reactive programming, RxJS stands for reactive extension for JavaScript. It helps to handle asynchronous request in a easier way using observables. You…

angular icon

How angular app works? what happen in background when angular application starts.

Let’s understand how an angular application works from core, what happen when it starts. In index.html file there is a <app-root> custom html code, this app-root is…

Leave a Reply

Your email address will not be published. Required fields are marked *