diff --git a/src/lib/chips/chip-default-options.ts b/src/lib/chips/chip-default-options.ts index 643f5fde94bc..6d06a0766d8d 100644 --- 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; } /** 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 index 35af7f394d31..833a68335b3e 100644 --- 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 index 50570fc4b091..33242c702b5d 100644 --- 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 = 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); + } }