Stop arrow key navigation through matChipRemove directives from deleting mdc-chip-rows.

Author: Kyle Owsen

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

@@ -1,5 +1,5 @@
 import {Directionality} from '@angular/cdk/bidi';
-import {BACKSPACE, DELETE} from '@angular/cdk/keycodes';
+import {BACKSPACE, DELETE, RIGHT_ARROW} from '@angular/cdk/keycodes';
 import {
   createKeyboardEvent,
   createFakeEvent,
@@ -9,14 +9,15 @@ import {Component, DebugElement, ViewChild} from '@angular/core';
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {Subject} from 'rxjs';
-import {MatChipEvent, MatChipGrid, MatChipRow, MatChipsModule} from './index';
+import {MatChipEvent, MatChipGrid, MatChipRemove, MatChipRow, MatChipsModule} from './index';
 
 
 describe('MDC-based Row Chips', () => {
   let fixture: ComponentFixture<any>;
   let chipDebugElement: DebugElement;
   let chipNativeElement: HTMLElement;
   let chipInstance: MatChipRow;
+  let removeIconInstance: MatChipRemove;
 
   let dir = 'ltr';
 
@@ -46,6 +47,9 @@ describe('MDC-based Row Chips', () => {
       chipNativeElement = chipDebugElement.nativeElement;
       chipInstance = chipDebugElement.injector.get<MatChipRow>(MatChipRow);
       testComponent = fixture.debugElement.componentInstance;
+
+      const removeIconDebugElement = fixture.debugElement.query(By.directive(MatChipRemove))!;
+      removeIconInstance = removeIconDebugElement.injector.get<MatChipRemove>(MatChipRemove);
     });
 
     describe('basic behaviors', () => {
@@ -135,6 +139,21 @@ describe('MDC-based Row Chips', () => {
 
           expect(testComponent.chipRemove).toHaveBeenCalled();
         });
+
+        it('arrow key navigation does not emit the (removed) event', () => {
+          const ARROW_KEY_EVENT = createKeyboardEvent('keydown', RIGHT_ARROW) as KeyboardEvent;
+
+          spyOn(testComponent, 'chipRemove');
+
+          removeIconInstance.interaction.next(ARROW_KEY_EVENT);
+          fixture.detectChanges();
+
+          const fakeEvent = createFakeEvent('transitionend');
+          (fakeEvent as any).propertyName = 'width';
+          chipNativeElement.dispatchEvent(fakeEvent);
+
+          expect(testComponent.chipRemove).not.toHaveBeenCalled();
+        });
       });
 
       describe('when removable is false', () => {
@@ -219,6 +238,7 @@ describe('MDC-based Row Chips', () => {
                  (focus)="chipFocus($event)" (destroyed)="chipDestroy($event)"
                  (removed)="chipRemove($event)">
           {{name}}
+          <button matChipRemove>x</button>
         </mat-chip-row>
         <input matInput [matChipInputFor]="chipGrid">
       </div>

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

@@ -17,7 +17,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import {MatChip} from './chip';
-import {GridKeyManagerRow, NAVIGATION_KEYS} from './grid-key-manager';
+import {GridKeyManagerRow} from './grid-key-manager';
 
 
 /**
@@ -61,9 +61,6 @@ export class MatChipRow extends MatChip implements AfterContentInit, AfterViewIn
   /** The focusable grid cells for this row. Implemented as part of GridKeyManagerRow. */
   cells!: HTMLElement[];
 
-  /** Key codes for which this component has a custom handler. */
-  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: Set<number> = new Set([SPACE, ENTER]);
+  readonly REMOVE_ICON_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.has((event as KeyboardEvent).keyCode))) {
+              !this.REMOVE_ICON_HANDLED_KEYS.has((event as KeyboardEvent).keyCode))) {
             return;
           }