CODEWITHSUNDEEP
angularangular-materialaccessibility
tha
tha

Reputation: 56

angular material mat-select with mat-chip-list remove chip by ENTER instead of DELETE or BACKSPACE

I have a component that contains a mat-select and displays the values selected in the mat-chip-list. I am currently working on accessability of the component. One of the requirements I received is to allow mat-chip removal using the Enter in place or in addition to Delete and Backspace. I checked the documentation of Angular Material and what I found is just that: enter image description here remove
Allows for programmatic removal of the chip. Called by the MatChipList when the DELETE or BACKSPACE keys are pressed. Informs any listeners of the removal request. Does not remove the chip from the DOM.

<mat-form-field>
  <mat-label>Choose Colors</mat-label>
  <mat-select [formControl]="colorsControl" multiple>

    <mat-option *ngFor="let color of colorsList" [value]="color">{{color}}</mat-option>
  </mat-select>
</mat-form-field>
    <div>
      <mat-chip-list>
        <mat-chip *ngFor="let color of colorsControl.value"
          [removable]="true" (removed)="onColorRemoved(color)" (keydown.enter)="onColorRemoved(color)">
          {{ color }}
          <mat-icon matChipRemove>cancel</mat-icon>
        </mat-chip>
      </mat-chip-list>
    </div>
<br/>

StackBlitz demo

Any help will be appreciated.

Upvotes: 0

Views: 5349

Answers (1)

tha
tha

Reputation: 56

In the end I found a simple solution to my problem: By adding keydown event on mat-chip:

 <mat-chip *ngFor="let color of colorsControl.value"
          [removable]="true" (removed)="onColorRemoved(color)" (keydown.enter)="onColorRemoved(color)">
          {{ color }}
          <mat-icon matChipRemove>cancel</mat-icon>
        </mat-chip>

StackBlitz solution demo

Upvotes: 3

Related Questions