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 change detection techniques

Understanding Angular Change Detection for Beginners | Angular 17 Change Detection Methods

Understanding how the Angular change detection technique helps in the process of building dynamic and responsive web applications. In this article, we’ll explore some essential concepts of…

TypeScript Strategies for Angular, Explaining Best Practices and Techniques

Angular has fully embraced TypeScript as its primary development language, a decision that has evolved into a widely accepted standard practice. TypeScript introduces robust features for static…

Unlocking the Future of Web Development: A Deep Dive into Angular 17 Features

Angular 17, the powerhouse in the realm of JavaScript frameworks, celebrated its 13th anniversary recently. From its inception with AngularJS, the framework has continuously evolved to meet…

angular-icon

How to use ngx-spinner in Angular to create a loading spinner for smoother user interactions

In this article, we will create a loading spinner component with ngx-spinner in angular application. ngx-spinner in angular provides a loading spinner component that we can use…

angular-icon

Master AngularFire2 and Angular by building a CRUD operation app

In this article, we are creating a CRUD application with angularFire2 and angular, This module basically provides direct access to the Firebase database, and by using angular…

angular-icon

Master Angular NgRx by creating a To-Do Application

In this article we are building a todo application using Angular NgRx, NgRx is used for state management in angular applications. Let’s start by creating a new…

Leave a Reply

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