debounce onInput. fixes #560

src/defaults.ts

@@ -23,6 +23,8 @@ export default {
 	preload: null,
 	allowEmptyOption: false,
 	//closeAfterSelect: false,
+	refreshThrottle: 300,
+
 
 	loadThrottle: 300,
 	loadingClass: 'loading',

src/tom-select.ts

@@ -16,6 +16,7 @@ import {
 	preventDefault,
 	addEvent,
 	loadDebounce,
+	timeout,
 	isKeyDown,
 	getId,
 	addSlashes,
@@ -87,6 +88,7 @@ export default class TomSelect extends MicroPlugin(MicroEvent){
 	public userOptions				: {[key:string]:boolean} = {};
 	public items					: string[] = [];
 
+	private refreshTimeout			: null|ReturnType<typeof setTimeout> = null;
 
 
 	constructor( input_arg: string|TomInput, user_settings:RecursivePartial<TomSettings> ){
@@ -760,23 +762,39 @@ export default class TomSelect extends MicroPlugin(MicroEvent){
 	 *
 	 */
 	onInput(e:MouseEvent|KeyboardEvent):void {
-		var self = this;
+
+		if( this.isLocked ){
+			return;
+		}
 
-		if( self.isLocked ){
+		const value = this.inputValue();
+		if( this.lastValue === value ) return;
+		this.lastValue = value;
+
+		if( value == '' ){
+			this._onInput();
 			return;
 		}
 
-		var value = self.inputValue();
-		if (self.lastValue !== value) {
-			self.lastValue = value;
+		if( this.refreshTimeout ){
+			clearTimeout(this.refreshTimeout);
+		}
+
+		this.refreshTimeout = timeout(()=> {
+			this.refreshTimeout = null;
+			this._onInput();
+		}, this.settings.refreshThrottle);
+	}
 
-			if( self.settings.shouldLoad.call(self,value) ){
-				self.load(value);
-			}
+	_onInput():void {
+		const value = this.lastValue;
 
-			self.refreshOptions();
-			self.trigger('type', value);
+		if( this.settings.shouldLoad.call(this,value) ){
+			this.load(value);
 		}
+
+		this.refreshOptions();
+		this.trigger('type', value);
 	}
 
 	/**

src/types/settings.ts

@@ -31,6 +31,7 @@ export type TomSettings = {
 	preload					: boolean|string,
 	allowEmptyOption		: boolean,
 	closeAfterSelect		: boolean,
+	refreshThrottle			: number,
 
 	loadThrottle			: number,
 	loadingClass			: string,

src/utils.ts

@@ -40,6 +40,18 @@ export const escape_html = (str:string):string => {
 };
 
 
+/**
+ * use setTimeout if timeout > 0 
+ */
+export const timeout = (fn:()=>void,timeout:number) => {
+	if( timeout > 0 ){
+		return setTimeout(fn,timeout);
+	}
+
+	fn.call(null);
+	return null;
+}
+
 /**
  * Debounce the user provided load function
  *

test/support/base.js

@@ -65,6 +65,8 @@ window.setup_test = function(html, options, callback) {
 	}
 
 	if( select.nodeName == 'SELECT' || select.nodeName == 'INPUT' ){
+		options = options || {};
+		options.refreshThrottle = 0;
 		instance = tomSelect(select,options);
 	}