Move input event handling from chip-list to chip-input (no tests changes yet)

Author: gioragutt

src/material/chips/chip-input.ts

@@ -7,8 +7,18 @@
  */
 
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
-import {Directive, ElementRef, EventEmitter, Inject, Input, OnChanges, Output} from '@angular/core';
-import {hasModifierKey, TAB} from '@angular/cdk/keycodes';
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  Input,
+  OnChanges,
+  Output,
+  OnDestroy,
+  AfterContentInit,
+} from '@angular/core';
+import {hasModifierKey, TAB, BACKSPACE} from '@angular/cdk/keycodes';
 import {MAT_CHIPS_DEFAULT_OPTIONS, MatChipsDefaultOptions} from './chip-default-options';
 import {MatChipList} from './chip-list';
 import {MatChipTextControl} from './chip-text-control';
@@ -36,6 +46,7 @@ let nextUniqueId = 0;
   host: {
     'class': 'mat-chip-input mat-input-element',
     '(keydown)': '_keydown($event)',
+    '(keyup)': '_keyup($event)',
     '(blur)': '_blur()',
     '(focus)': '_focus()',
     '(input)': '_onInput()',
@@ -46,7 +57,10 @@ let nextUniqueId = 0;
     '[attr.aria-required]': '_chipList && _chipList.required || null',
   }
 })
-export class MatChipInput implements MatChipTextControl, OnChanges {
+export class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy, AfterContentInit {
+  /** Used to prevent focus moving to chips while user is holding backspace */
+  private _focusLastChipOnBackspace: boolean;
+
   /** Whether the control is focused. */
   focused: boolean = false;
   _chipList: MatChipList;
@@ -104,21 +118,50 @@ export class MatChipInput implements MatChipTextControl, OnChanges {
     this._inputElement = this._elementRef.nativeElement as HTMLInputElement;
   }
 
-  ngOnChanges() {
+  ngOnChanges(): void {
     this._chipList.stateChanges.next();
   }
 
+  ngOnDestroy(): void {
+    this.chipEnd.complete();
+  }
+
+  ngAfterContentInit(): void {
+    this._focusLastChipOnBackspace = this.empty;
+  }
+
   /** Utility method to make host definition/tests more clear. */
   _keydown(event?: KeyboardEvent) {
-    // Allow the user's focus to escape when they're tabbing forward. Note that we don't
-    // want to do this when going backwards, because focus should go back to the first chip.
-    if (event && event.keyCode === TAB && !hasModifierKey(event, 'shiftKey')) {
-      this._chipList._allowFocusEscape();
+    if (event) {
+      // Allow the user's focus to escape when they're tabbing forward. Note that we don't
+      // want to do this when going backwards, because focus should go back to the first chip.
+      if (event.keyCode === TAB && !hasModifierKey(event, 'shiftKey')) {
+        this._chipList._allowFocusEscape();
+      }
+
+      if (event.keyCode === BACKSPACE && this._focusLastChipOnBackspace) {
+        this._chipList._keyManager.setLastItemActive();
+        event.preventDefault();
+        return;
+      } else {
+        this._focusLastChipOnBackspace = false;
+      }
     }
 
     this._emitChipEnd(event);
   }
 
+  /**
+   * Pass events to the keyboard manager. Available here for tests.
+   */
+  _keyup(event: KeyboardEvent) {
+    // Allow user to move focus to chips next time he presses backspace
+    if (!this._focusLastChipOnBackspace && event.keyCode === BACKSPACE && this.empty) {
+      this._focusLastChipOnBackspace = true;
+      event.preventDefault();
+    }
+  }
+
   /** Checks to see if the blur should emit the (chipEnd) event. */
   _blur() {
     if (this.addOnBlur) {

src/material/chips/chip-list.ts

@@ -10,7 +10,7 @@ import {FocusKeyManager} from '@angular/cdk/a11y';
 import {Directionality} from '@angular/cdk/bidi';
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 import {SelectionModel} from '@angular/cdk/collections';
-import {BACKSPACE, END, HOME} from '@angular/cdk/keycodes';
+import {END, HOME} from '@angular/cdk/keycodes';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -92,7 +92,6 @@ export class MatChipListChange {
     '(focus)': 'focus()',
     '(blur)': '_blur()',
     '(keydown)': '_keydown($event)',
-    '(keyup)': '_keyup($event)',
     '[id]': '_uid',
   },
   providers: [{provide: MatFormFieldControl, useExisting: MatChipList}],
@@ -130,9 +129,6 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
   /** Subscription to remove changes in chips. */
   private _chipRemoveSubscription: Subscription | null;
 
-  /** Used to prevent focus moving to chips while user is holding backspace */
-  private _focusLastChipOnBackspace: boolean;
-
   /** The chip input to add more chips */
   protected _chipInput: MatChipTextControl;
 
@@ -421,7 +417,6 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
   /** Associates an HTML input element with this chip list. */
   registerInput(inputElement: MatChipTextControl): void {
     this._chipInput = inputElement;
-    this._focusLastChipOnBackspace = inputElement.empty;
   }
 
   /**
@@ -498,17 +493,6 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
   _keydown(event: KeyboardEvent) {
     const target = event.target as HTMLElement;
 
-    // After input became empty and backspace was pressed again, focus last chip
-    if (this._isInputElement(target)) {
-      if (event.keyCode === BACKSPACE && this._focusLastChipOnBackspace) {
-        this._keyManager.setLastItemActive();
-        event.preventDefault();
-      } else {
-        this._focusLastChipOnBackspace = false;
-      }
-      return;
-    }
-
     if (target && target.classList.contains('mat-chip')) {
       if (event.keyCode === HOME) {
         this._keyManager.setFirstItemActive();
@@ -524,23 +508,6 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
     }
   }
 
-  /**
-   * Pass events to the keyboard manager. Available here for tests.
-   */
-  _keyup(event: KeyboardEvent) {
-    const target = event.target as HTMLElement;
-
-    // Allow user to move focus to chips next time he presses backspace
-    if (
-      !this._focusLastChipOnBackspace &&
-      event.keyCode === BACKSPACE &&
-      this._isInputEmpty(target)
-    ) {
-      this._focusLastChipOnBackspace = true;
-      event.preventDefault();
-    }
-  }
-
   /**
    * Check the tab index as you should not be allowed to focus an empty list.
    */
@@ -577,18 +544,6 @@ export class MatChipList extends _MatChipListMixinBase implements MatFormFieldCo
     return index >= 0 && index < this.chips.length;
   }
 
-  private _isInputElement(element: HTMLElement): element is HTMLInputElement {
-    return element && element.nodeName.toLowerCase() === 'input';
-  }
-
-  private _isInputEmpty(element: HTMLElement): boolean {
-    if (this._isInputElement(element)) {
-      return !element.value;
-    }
-
-    return false;
-  }
-
   _setSelectionByValue(value: any, isUserInput: boolean = true) {
     this._clearSelection();
     this.chips.forEach(chip => chip.deselect());