Merge pull request #405 from SamGraber/debounce

Allow the consumer to override the default debounce

Author: Sam Graber

bootstrapper/inputs/inputsNg2.html

@@ -44,6 +44,7 @@ <h3><a href="https://github.com/SamGraber/TypeScript-Angular-Components/blob/mas
 		<template let-option>Value - {{option.value}}</template>
 	</rlTypeahead>
 	<rlTypeahead [(value)]="typeaheadSelection" prefix="Search for a" label="Typeahead with create" [getItems]="getOptions" clientSearch="true" transform="value" [create]="createOption" allowCollapse="true"></rlTypeahead>
+	<rlTypeahead [(value)]="typeaheadSelection" prefix="Search for a" label="Typeahead long debounce" [getItems]="searchOptions" transform="value" allowCollapse="true" [debounce]="10000"></rlTypeahead>
 </div>
 <div>
 	<rlTypeaheadList [(value)]="selections" label="Typeahead list" [getItems]="getOptions" clientSearch="true" transform="value"></rlTypeaheadList>

source/components/inputs/typeahead/typeahead.tests.ts

@@ -10,7 +10,7 @@ import __search = services.search;
 
 import { ComponentValidator } from '../../../services/componentValidator/componentValidator.service';
 
-import { TypeaheadComponent, DEFAULT_SERVER_SEARCH_DEBOUNCE } from './typeahead';
+import { TypeaheadComponent, DEFAULT_SERVER_SEARCH_DEBOUNCE, DEFAULT_CLIENT_SEARCH_DEBOUNCE } from './typeahead';
 
 interface ITransformMock {
 	getValue: sinon.SinonSpy;
@@ -69,6 +69,38 @@ describe('TypeaheadComponent', () => {
 		expect(typeahead.collapsed).to.be.true;
 	});
 
+	describe('debounce', () => {
+		it('should use the default server search debounce by default', () => {
+			typeahead.ngOnInit();
+			expect(typeahead.loadDelay).to.equal(DEFAULT_SERVER_SEARCH_DEBOUNCE);
+		});
+
+		it('should use the default client search debounce if client searching is on', () => {
+			typeahead.clientSearch = true;
+			typeahead.ngOnInit();
+			expect(typeahead.loadDelay).to.equal(DEFAULT_CLIENT_SEARCH_DEBOUNCE);
+		});
+
+		it('should use the custom debounce when client searching is off', () => {
+			const debounce = 10000;
+			typeahead.debounce = debounce;
+
+			typeahead.ngOnInit();
+
+			expect(typeahead.loadDelay).to.equal(debounce);
+		});
+
+		it('should use the custom debounce when client searching is on', () => {
+			const debounce = 10000;
+			typeahead.debounce = debounce;
+
+			typeahead.clientSearch = true;
+			typeahead.ngOnInit();
+
+			expect(typeahead.loadDelay).to.equal(debounce);
+		});
+	});
+
 	describe('loadItems', (): void => {
 		let items: string[];
 

source/components/inputs/typeahead/typeahead.ts

@@ -41,6 +41,7 @@ export class TypeaheadComponent<T> extends ValidatedInputComponent<T> implements
 	@Input() allowCollapse: boolean;
 	@Input() create: { (value: string): T };
 	@Input() caseSensitiveSearching: boolean;
+	@Input() debounce: number;
 	@Output() selector: EventEmitter<T> = new EventEmitter<T>();
 
 
@@ -158,7 +159,12 @@ export class TypeaheadComponent<T> extends ValidatedInputComponent<T> implements
 	ngOnInit(): void {
 		super.ngOnInit();
 
-		this.loadDelay = this.clientSearch ? DEFAULT_CLIENT_SEARCH_DEBOUNCE : DEFAULT_SERVER_SEARCH_DEBOUNCE;
+		if (this.debounce) {
+			this.loadDelay = this.debounce;
+		} else {
+			this.loadDelay = this.clientSearch ? DEFAULT_CLIENT_SEARCH_DEBOUNCE : DEFAULT_SERVER_SEARCH_DEBOUNCE;
+		}
+
 		this.prefix = this.prefix || 'Search for';
 		this.placeholder = this.label != null ? this.prefix + ' ' + this.label.toLowerCase() : 'Search';