fix(material-experimental/chips): remove icon responds to invalid keys

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, X} from '@angular/cdk/keycodes';
 import {MatChip, MatChipsModule} from './index';
 
 describe('MDC-based Chip Remove', () => {
@@ -156,6 +156,30 @@ describe('MDC-based Chip Remove', () => {
       expect(event.defaultPrevented).toBe(false);
     });
 
+    it('should remove the chip when ENTER or SPACE is pressed without a modifier key', () => {
+      const buttonElement = chipNativeElement.querySelector('button')!;
+
+      testChip.removable = true;
+      fixture.detectChanges();
+
+      dispatchKeyboardEvent(buttonElement, 'keydown', SPACE);
+      fixture.detectChanges();
+
+      expect(chipNativeElement.classList.contains('mdc-chip--exit')).toBe(true);
+    });
+
+    it('should not remove the chip when a key other than ENTER or SPACE is pressed', () => {
+      const buttonElement = chipNativeElement.querySelector('button')!;
+
+      testChip.removable = true;
+      fixture.detectChanges();
+
+      dispatchKeyboardEvent(buttonElement, 'keydown', X);
+      fixture.detectChanges();
+
+      expect(chipNativeElement.classList.contains('mdc-chip--exit')).toBe(false);
+    });
+
     it('should have a focus indicator', () => {
       const buttonElement = chipNativeElement.querySelector('button')!;
 

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

@@ -375,24 +375,26 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte
     this.removeIcon.interaction
         .pipe(takeUntil(this._destroyed))
         .subscribe(event => {
+          if (this.disabled) {
+            return;
+          }
+
           // The MDC chip foundation calls stopPropagation() for any trailing icon interaction
           // event, even ones it doesn't handle, so we want to avoid passing it keyboard events
           // for which we have a custom handler. Note that we assert the type of the event using
           // the `type`, because `instanceof KeyboardEvent` can throw during server-side rendering.
           const isKeyboardEvent = event.type.startsWith('key');
+          const isClickEvent = event.type.startsWith('click');
 
-          if (this.disabled || (isKeyboardEvent &&
-              this.HANDLED_KEYS.indexOf((event as KeyboardEvent).keyCode) !== -1)) {
-            return;
-          }
-
-          this._chipFoundation.handleTrailingActionInteraction();
-
-          if (isKeyboardEvent && !hasModifierKey(event as KeyboardEvent)) {
+          if (isClickEvent) {
+            this._chipFoundation.handleTrailingActionInteraction();
+          } else if (isKeyboardEvent) {
             const keyCode = (event as KeyboardEvent).keyCode;
-
-            // Prevent default space and enter presses so we don't scroll the page or submit forms.
-            if (keyCode === SPACE || keyCode === ENTER) {
+            if ((keyCode === SPACE || keyCode === ENTER) &&
+              !hasModifierKey(event as KeyboardEvent)) {
+              this._chipFoundation.handleTrailingActionInteraction();
+              // Prevent default space and enter presses so we don't scroll the page or submit
+              // forms.
               event.preventDefault();
             }
           }