angular 材料 mat-select with mat-chip-list 通过 ENTER 而不是 DELETE 或 BACKSPACE 删除芯片

Question

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

Answer 1

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