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

Fixes an issue where pressing any non-arrow key while the chip
remove icon is focused removes the chip. This should only happen for
ENTER or SPACE. This issue was introduced when MDC refactored the
chip foundation. The handleTrailingIconInteraction method, which
used to call shouldHandleInteraction to detect if the keydown event
was ENTER or SPACE, was replaced with handleTrailingActionInteraction,
which handles all keydown events. This change was made in
github.com/material-components/material-components-web/pull/5890, and
MDC chips were migrated in github.com//pull/19318.

Author: vanessanschmitt

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();
             }
           }