fix(filter): all jquery .on bound event should also be unbound

- the multiple-select.js was causing some weird behavior, if user would go on the GraphQL example, then choose a different company in the multiple select filter and click away (not on OK button) to simulate a blur, the spinner would never show up. The reason was because there was a click event bound to the document and was never unbound
- ref wenzhixin/multiple-select#373

Author: Ghislain Beaulac

src/app/examples/custom-inputEditor.ts

@@ -57,7 +57,7 @@ export class CustomInputEditor implements Editor {
   }
 
   destroy() {
-    this.$input.remove();
+    this.$input.off('keydown.nav').remove();
   }
 
   focus() {

src/app/modules/angular-slickgrid/editors/autoCompleteEditor.ts

@@ -100,7 +100,7 @@ export class AutoCompleteEditor implements Editor {
   }
 
   destroy() {
-    this.$input.remove();
+    this.$input.off('keydown.nav').remove();
   }
 
   focus() {

src/app/modules/angular-slickgrid/editors/floatEditor.ts

@@ -61,7 +61,7 @@ export class FloatEditor implements Editor {
   }
 
   destroy() {
-    this.$input.remove();
+    this.$input.off('keydown.nav focusout').remove();
   }
 
   focus() {

src/app/modules/angular-slickgrid/editors/integerEditor.ts

@@ -59,7 +59,7 @@ export class IntegerEditor implements Editor {
   }
 
   destroy() {
-    this.$input.remove();
+    this.$input.off('keydown.nav focusout').remove();
   }
 
   focus() {

src/app/modules/angular-slickgrid/editors/longTextEditor.ts

@@ -137,7 +137,7 @@ export class LongTextEditor implements Editor {
   }
 
   destroy() {
-    this.$wrapper.remove();
+    this.$wrapper.off('keydown focusout').remove();
   }
 
   focus() {

src/app/modules/angular-slickgrid/editors/sliderEditor.ts

@@ -72,7 +72,7 @@ export class SliderEditor implements Editor {
   }
 
   destroy() {
-    this.$editorElm.remove();
+    this.$editorElm.off('input change mouseup').remove();
   }
 
   focus() {

src/app/modules/angular-slickgrid/editors/textEditor.ts

@@ -58,7 +58,7 @@ export class TextEditor implements Editor {
   }
 
   destroy() {
-    this.$input.remove();
+    this.$input.off('keydown.nav focusout').remove();
   }
 
   focus() {

src/app/modules/angular-slickgrid/filters/compoundSliderFilter.ts

@@ -123,7 +123,7 @@ export class CompoundSliderFilter implements Filter {
    */
   destroy() {
     if (this.$filterElm) {
-      this.$filterElm.off('change').remove();
+      this.$filterElm.off('input change').remove();
     }
   }
 

src/app/modules/angular-slickgrid/services/filter.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import {
+  BackendServiceApi,
   Column,
   ColumnFilter,
   ColumnFilters,
@@ -72,11 +73,11 @@ export class FilterService {
     this._slickSubscriber = new Slick.Event();
 
     // subscribe to the SlickGrid event and call the backend execution
-    this._slickSubscriber.subscribe(this.attachBackendOnFilterSubscribe.bind(this));
+    this._slickSubscriber.subscribe(this.onBackendFilterChange.bind(this));
 
     // subscribe to SlickGrid onHeaderRowCellRendered event to create filter template
     this._eventHandler.subscribe(grid.onHeaderRowCellRendered, (e: KeyboardEvent, args: any) => {
-      // firstColumnIdRendered is null at first, so if becomes filled and equal then we know it was already rendered
+      // firstColumnIdRendered is null at first, so if it changes to being filled and equal then we know it was already rendered
       if (args.column.id === this._firstColumnIdRendered) {
         this._isFilterFirstRender = false;
       }
@@ -87,7 +88,7 @@ export class FilterService {
     });
   }
 
-  async attachBackendOnFilterSubscribe(event: KeyboardEvent, args: any) {
+  onBackendFilterChange(event: KeyboardEvent, args: any) {
     if (!args || !args.grid) {
       throw new Error('Something went wrong when trying to attach the "attachBackendOnFilterSubscribe(event, args)" function, it seems that "args" is not populated correctly');
     }
@@ -111,31 +112,37 @@ export class FilterService {
       }
 
       // call the service to get a query back
-      clearTimeout(timer);
-      timer = setTimeout(async () => {
-        const query = await backendApi.service.processOnFilterChanged(event, args);
-
-        // emit an onFilterChanged event when it's not called by clearAllFilters
-        if (args && !args.clearFilterTriggered) {
-          this.emitFilterChanged('remote');
-        }
-
-        // the processes can be Observables (like HttpClient) or Promises
-        const process = backendApi.process(query);
-        if (process instanceof Promise && process.then) {
-          process.then((processResult: GraphqlResult | any) => executeBackendProcessesCallback(startTime, processResult, backendApi, this._gridOptions));
-        } else if (isObservable(process)) {
-          process.subscribe(
-            (processResult: GraphqlResult | any) => executeBackendProcessesCallback(startTime, processResult, backendApi, this._gridOptions),
-            (error: any) => onBackendError(error, backendApi)
-          );
-        }
-      }, debounceTypingDelay);
+      if (debounceTypingDelay > 0) {
+        clearTimeout(timer);
+        timer = setTimeout(() => this.executeBackendCallback(args, startTime, backendApi), debounceTypingDelay);
+      } else {
+        this.executeBackendCallback(args, startTime, backendApi);
+      }
     } catch (error) {
       onBackendError(error, backendApi);
     }
   }
 
+  async executeBackendCallback(args: any, startTime: Date, backendApi: BackendServiceApi) {
+    const query = await backendApi.service.processOnFilterChanged(event, args);
+
+    // emit an onFilterChanged event when it's not called by clearAllFilters
+    if (args && !args.clearFilterTriggered) {
+      this.emitFilterChanged('remote');
+    }
+
+    // the processes can be Observables (like HttpClient) or Promises
+    const process = backendApi.process(query);
+    if (process instanceof Promise && process.then) {
+      process.then((processResult: GraphqlResult | any) => executeBackendProcessesCallback(startTime, processResult, backendApi, this._gridOptions));
+    } else if (isObservable(process)) {
+      process.subscribe(
+        (processResult: GraphqlResult | any) => executeBackendProcessesCallback(startTime, processResult, backendApi, this._gridOptions),
+        (error: any) => onBackendError(error, backendApi)
+      );
+    }
+  }
+
   /**
    * Attach a local filter hook to the grid
    * @param grid SlickGrid Grid object
@@ -395,7 +402,7 @@ export class FilterService {
       }
 
       // trigger an event only if Filters changed or if ENTER key was pressed
-      const eventKeyCode = e && e.keyCode && e.keyCode;
+      const eventKeyCode = e && e.keyCode;
       if (eventKeyCode === KeyCode.ENTER || !isequal(oldColumnFilters, this._columnFilters)) {
         this.triggerEvent(this._slickSubscriber, {
           clearFilterTriggered: args && args.clearFilterTriggered,
@@ -460,7 +467,7 @@ export class FilterService {
   }
 
   /**
-   * A simple function that is attached to the subscriber and emit a change when the sort is called.
+   * A simple function that is attached to the subscriber and emit a change when the filter is called.
    * Other services, like Pagination, can then subscribe to it.
    * @param caller
    */

src/assets/lib/multiple-select/multiple-select.js

@@ -209,14 +209,15 @@
     this.selectItemName = 'data-name="selectItem' + name + '"';
 
     if (!this.options.keepOpen) {
-      $(document).click(function (e) {
+      $(document).off('click').click(function (e) {
         if ($(e.target)[0] === that.$choice[0] ||
           $(e.target).parents('.ms-choice')[0] === that.$choice[0]) {
           return;
         }
         if (($(e.target)[0] === that.$drop[0] ||
           $(e.target).parents('.ms-drop')[0] !== that.$drop[0] && e.target !== $el[0]) &&
-          that.options.isOpen) {
+          that.options.isOpen
+        ) {
           that.close();
         }
       });
@@ -264,8 +265,6 @@
       if (this.options.okButton) {
         this.$okButton = $('<button type="button" class="ms-ok-button">' + this.options.okButtonText + '</button>');
         this.$drop.append(this.$okButton);
-
-
       }
 
       var dropWidth = isNaN(this.options.width) ? this.options.width : this.options.width + 'px';