title: angular material mat-select with mat-chip-list remove chip by ENTER instead of DELETE or BACKSPACE
body: <p>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 <kbd>Enter</kbd> in place or in addition to <kbd>Delete</kbd> and <kbd>Backspace</kbd>.
  I checked the documentation of Angular Material and what I found is just that:
  <a href="https://i.stack.imgur.com/GplCt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GplCt.png" alt="enter image description here" /></a>
  remove<br />
  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.</p>
  <pre><code>&lt;mat-form-field&gt;
    &lt;mat-label&gt;Choose Colors&lt;/mat-label&gt;
    &lt;mat-select [formControl]=&quot;colorsControl&quot; multiple&gt;
  
      &lt;mat-option *ngFor=&quot;let color of colorsList&quot; [value]=&quot;color&quot;&gt;{{color}}&lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
      &lt;div&gt;
        &lt;mat-chip-list&gt;
          &lt;mat-chip *ngFor=&quot;let color of colorsControl.value&quot;
            [removable]=&quot;true&quot; (removed)=&quot;onColorRemoved(color)&quot; (keydown.enter)=&quot;onColorRemoved(color)&quot;&gt;
            {{ color }}
            &lt;mat-icon matChipRemove&gt;cancel&lt;/mat-icon&gt;
          &lt;/mat-chip&gt;
        &lt;/mat-chip-list&gt;
      &lt;/div&gt;
  &lt;br/&gt;
  </code></pre>
  <p><a href="https://stackblitz.com/edit/angular-material-v9-mat-select-with-mat-chip-list-remove-chip-b?file=src/app/select-multiple-example.ts" rel="nofollow noreferrer">StackBlitz demo</a></p>
  <p>Any help will be appreciated.</p>