feat(chips): allow set in separatorKeyCodes (#12477)

Resolves a long-standing TODO about supporting a `Set` in a chip input's `separatorKeyCodes`.
angular · Aug 3, 2018 · 170665a · 170665a
1 parent 4a9fe87
commit 170665a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/src/lib/chips/chip-default-options.ts b/src/lib/chips/chip-default-options.ts
@@ -11,7 +11,7 @@ import {InjectionToken} from '@angular/core';
 /** Default options, for the chips module, that can be overridden. */
 export interface MatChipsDefaultOptions {
   /** The list of key codes that will trigger a chipEnd event. */
-  separatorKeyCodes: number[];
+  separatorKeyCodes: number[] | Set<number>;
 }
 
 /** Injection token to be used to override the default options for the chips module. */

diff --git a/src/lib/chips/chip-input.spec.ts b/src/lib/chips/chip-input.spec.ts
@@ -129,6 +129,17 @@ describe('MatChipInput', () => {
       expect(testChipInput.add).toHaveBeenCalled();
     });
 
+    it('emits accepts the custom separator keys in a Set', () => {
+      let COMMA_EVENT = createKeyboardEvent('keydown', COMMA, inputNativeElement);
+      spyOn(testChipInput, 'add');
+
+      chipInputDirective.separatorKeyCodes = new Set([COMMA]);
+      fixture.detectChanges();
+
+      chipInputDirective._keydown(COMMA_EVENT);
+      expect(testChipInput.add).toHaveBeenCalled();
+    });
+
     it('emits (chipEnd) when the separator keys are configured globally', () => {
       fixture.destroy();
 

diff --git a/src/lib/chips/chip-input.ts b/src/lib/chips/chip-input.ts
@@ -68,9 +68,8 @@ export class MatChipInput implements OnChanges {
    *
    * Defaults to `[ENTER]`.
    */
-  // TODO(tinayuangao): Support Set here
   @Input('matChipInputSeparatorKeyCodes')
-  separatorKeyCodes: number[] = this._defaultOptions.separatorKeyCodes;
+  separatorKeyCodes: number[] | Set<number> = this._defaultOptions.separatorKeyCodes;
 
   /** Emitted when a chip is to be added. */
   @Output('matChipInputTokenEnd')
@@ -126,7 +125,7 @@ export class MatChipInput implements OnChanges {
     if (!this._inputElement.value && !!event) {
       this._chipList._keydown(event);
     }
-    if (!event || this.separatorKeyCodes.indexOf(event.keyCode) > -1) {
+    if (!event || this._isSeparatorKey(event.keyCode)) {
       this.chipEnd.emit({ input: this._inputElement, value: this._inputElement.value });
 
       if (event) {
@@ -141,5 +140,13 @@ export class MatChipInput implements OnChanges {
   }
 
   /** Focuses the input. */
-  focus(): void { this._inputElement.focus(); }
+  focus(): void {
+    this._inputElement.focus();
+  }
+
+  /** Checks whether a keycode is one of the configured separators. */
+  private _isSeparatorKey(keyCode: number) {
+    const separators = this.separatorKeyCodes;
+    return Array.isArray(separators) ? separators.indexOf(keyCode) > -1 : separators.has(keyCode);
+  }
 }