fix(material-experimental/mdc-chips): removing chip on any key press (#19425)

Currently the MDC-based chip emits the `remove` event on any key press on the remove button which seems to have regressed inbetween the different version upgrades and refactors.

Author: crisbeto

src/material-experimental/mdc-chips/chip-remove.spec.ts

@@ -7,7 +7,7 @@ import {
 import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {SPACE, ENTER} from '@angular/cdk/keycodes';
+import {SPACE, ENTER, TAB} from '@angular/cdk/keycodes';
 import {MatChip, MatChipsModule} from './index';
 
 describe('MDC-based Chip Remove', () => {
@@ -156,6 +156,23 @@ describe('MDC-based Chip Remove', () => {
       expect(event.defaultPrevented).toBe(false);
     });
 
+    it ('should not remove on any key press', () => {
+      let buttonElement = chipNativeElement.querySelector('button')!;
+
+      testChip.removable = true;
+      fixture.detectChanges();
+
+      spyOn(testChip, 'didRemove');
+      dispatchKeyboardEvent(buttonElement, 'keydown', TAB);
+      fixture.detectChanges();
+
+      const fakeEvent = createFakeEvent('transitionend');
+      (fakeEvent as any).propertyName = 'width';
+      chipNativeElement.dispatchEvent(fakeEvent);
+
+      expect(testChip.didRemove).not.toHaveBeenCalled();
+    });
+
     it('should have a focus indicator', () => {
       const buttonElement = chipNativeElement.querySelector('button')!;
 

src/material-experimental/mdc-chips/chip-row.ts

@@ -62,7 +62,7 @@ export class MatChipRow extends MatChip implements AfterContentInit, AfterViewIn
   cells!: HTMLElement[];
 
   /** Key codes for which this component has a custom handler. */
-  HANDLED_KEYS = NAVIGATION_KEYS.concat([BACKSPACE, DELETE]);
+  HANDLED_KEYS: Set<number> = new Set([...NAVIGATION_KEYS, BACKSPACE, DELETE]);
 
   ngAfterContentInit() {
     super.ngAfterContentInit();

src/material-experimental/mdc-chips/chip.ts

@@ -131,7 +131,7 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
   /** Emits when the chip is blurred. */
   readonly _onBlur = new Subject<MatChipEvent>();
 
-  readonly HANDLED_KEYS: number[] = [];
+  readonly HANDLED_KEYS: Set<number> = new Set([SPACE, ENTER]);
 
   /** Whether this chip is a basic (unstyled) chip. */
   readonly _isBasicChip: boolean;
@@ -385,7 +385,7 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
           const isKeyboardEvent = event.type.startsWith('key');
 
           if (this.disabled || (isKeyboardEvent &&
-              this.HANDLED_KEYS.indexOf((event as KeyboardEvent).keyCode) !== -1)) {
+              !this.HANDLED_KEYS.has((event as KeyboardEvent).keyCode))) {
             return;
           }