From 0ee3421b86374616533e2e9ebc2945d13705782b Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Fri, 13 Nov 2020 17:59:25 -0500
Subject: [PATCH] fix(core): clear dataset when destroying & fix few
 unsubscribed events (#629)

Co-authored-by: Ghislain Beaulac <SESA213338@se.com>
---
 src/app/examples/grid-frozen.component.ts     |  23 ++--
 src/app/examples/grid-rowmove.component.ts    |  17 ++-
 .../angular-slickgrid-constructor.spec.ts     |   5 +-
 .../angular-slickgrid.component.spec.ts       |   4 -
 .../components/angular-slickgrid.component.ts |  57 ++++++---
 .../editors/__tests__/longTextEditor.spec.ts  |   4 +-
 .../editors/autoCompleteEditor.ts             |   7 +-
 .../editors/longTextEditor.ts                 |   8 +-
 .../cellExternalCopyManagerExtension.ts       |  35 +++---
 .../extensions/cellMenuExtension.ts           |  36 +++---
 .../extensions/checkboxSelectorExtension.ts   |   2 +-
 .../extensions/columnPickerExtension.ts       |  61 +++++-----
 .../extensions/contextMenuExtension.ts        |  48 ++++----
 .../extensions/draggableGroupingExtension.ts  |  16 ++-
 .../extensions/extensionUtility.ts            |  14 +++
 .../extensions/gridMenuExtension.ts           |  90 +++++++-------
 .../groupItemMetaProviderExtension.ts         |   2 +-
 .../extensions/headerButtonExtension.ts       |  20 ++--
 .../extensions/headerMenuExtension.ts         |   3 +-
 .../extensions/rowDetailViewExtension.ts      |   7 +-
 .../extensions/rowSelectionExtension.ts       |   2 +-
 .../__tests__/autoCompleteFilter.spec.ts      |  12 +-
 .../__tests__/compoundInputFilter.spec.ts     |  44 ++++++-
 .../filters/__tests__/inputFilter.spec.ts     |  44 ++++++-
 .../filters/__tests__/inputMaskFilter.spec.ts |  20 ++--
 .../filters/autoCompleteFilter.ts             |  25 ++--
 .../filters/compoundDateFilter.ts             |   4 +-
 .../filters/compoundInputFilter.ts            |  25 ++--
 .../filters/compoundSliderFilter.ts           |  18 ++-
 .../filters/dateRangeFilter.ts                |   6 +-
 .../angular-slickgrid/filters/inputFilter.ts  |  52 +++++----
 .../filters/inputMaskFilter.ts                |   4 +-
 .../filters/nativeSelectFilter.ts             |   3 +-
 .../angular-slickgrid/filters/selectFilter.ts |  11 +-
 .../angular-slickgrid/filters/sliderFilter.ts |   5 +-
 .../filters/sliderRangeFilter.ts              |   6 +-
 .../services/__tests__/filter.service.spec.ts |  22 ++--
 .../services/filter.service.ts                |  94 ++++++++-------
 .../services/gridEvent.service.ts             | 110 ++++++++++--------
 .../services/shared.service.ts                |   6 +-
 .../services/treeData.service.ts              |   2 +-
 test/cypress/package.json                     |   2 +-
 42 files changed, 583 insertions(+), 393 deletions(-)

diff --git a/src/app/examples/grid-frozen.component.ts b/src/app/examples/grid-frozen.component.ts
index 2401e2f1d..6891b10b5 100644
--- a/src/app/examples/grid-frozen.component.ts
+++ b/src/app/examples/grid-frozen.component.ts
@@ -33,8 +33,9 @@ export class GridFrozenComponent implements OnInit, OnDestroy {
 
   ngOnDestroy() {
     // unsubscribe every SlickGrid subscribed event (or use the Slick.EventHandler)
-    this.gridObj.onMouseEnter.unsubscribe();
-    this.gridObj.onMouseLeave.unsubscribe();
+    this.gridObj.onMouseEnter.unsubscribe(this.highlightRow);
+    this.gridObj.onMouseLeave.unsubscribe(this.highlightRow);
+    this.highlightRow = null;
   }
 
   angularGridReady(angularGrid: AngularGridInstance) {
@@ -44,15 +45,15 @@ export class GridFrozenComponent implements OnInit, OnDestroy {
     // with frozen (pinned) grid, in order to see the entire row being highlighted when hovering
     // we need to do some extra tricks (that is because frozen grids use 2 separate div containers)
     // the trick is to use row selection to highlight when hovering current row and remove selection once we're not
-    this.gridObj.onMouseEnter.subscribe(event => {
-      const cell = this.gridObj.getCellFromEvent(event);
-      this.gridObj.setSelectedRows([cell.row]); // highlight current row
-      event.preventDefault();
-    });
-    this.gridObj.onMouseLeave.subscribe(event => {
-      this.gridObj.setSelectedRows([]); // remove highlight
-      event.preventDefault();
-    });
+    this.gridObj.onMouseEnter.subscribe(event => this.highlightRow(event, true));
+    this.gridObj.onMouseLeave.subscribe(event => this.highlightRow(event, false));
+  }
+
+  highlightRow(event: Event, isMouseEnter: boolean) {
+    const cell = this.gridObj.getCellFromEvent(event);
+    const rows = isMouseEnter ? [cell.row] : [];
+    this.gridObj.setSelectedRows(rows); // highlight current row
+    event.preventDefault();
   }
 
   prepareDataGrid() {
diff --git a/src/app/examples/grid-rowmove.component.ts b/src/app/examples/grid-rowmove.component.ts
index b079174af..56a735936 100644
--- a/src/app/examples/grid-rowmove.component.ts
+++ b/src/app/examples/grid-rowmove.component.ts
@@ -1,11 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AngularGridInstance, Column, ExtensionName, Filters, Formatters, GridOption } from './../modules/angular-slickgrid';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   templateUrl: './grid-rowmove.component.html'
 })
-export class GridRowMoveComponent implements OnInit {
+export class GridRowMoveComponent implements OnInit, OnDestroy {
   title = 'Example 17: Row Move & Checkbox Selector';
   subTitle = `This example demonstrates using the <b>Slick.Plugins.RowMoveManager</b> plugin to easily move a row in the grid.<br/>
     <ul>
@@ -41,6 +41,12 @@ export class GridRowMoveComponent implements OnInit {
     return this.angularGrid && this.angularGrid.extensionService.getSlickgridAddonInstance(ExtensionName.rowMoveManager) || {};
   }
 
+  ngOnDestroy() {
+    // nullify the callbacks to avoid mem leaks
+    this.onBeforeMoveRow = null;
+    this.onMoveRows = null;
+  }
+
   ngOnInit(): void {
     this.columnDefinitions = [
       { id: 'title', name: 'Title', field: 'title', filterable: true, },
@@ -95,8 +101,8 @@ export class GridRowMoveComponent implements OnInit {
         disableRowSelection: true,
         cancelEditOnDrag: true,
         width: 30,
-        onBeforeMoveRows: (e, args) => this.onBeforeMoveRow(e, args),
-        onMoveRows: (e, args) => this.onMoveRows(e, args),
+        onBeforeMoveRows: this.onBeforeMoveRow,
+        onMoveRows: this.onMoveRows.bind(this),
 
         // you can change the move icon position of any extension (RowMove, RowDetail or RowSelector icon)
         // note that you might have to play with the position when using multiple extension
@@ -165,8 +171,7 @@ export class GridRowMoveComponent implements OnInit {
     for (let i = 0; i < rows.length; i++) {
       selectedRows.push(left.length + i);
     }
-
-    this.angularGrid.slickGrid.resetActiveCell();
+    args.grid.resetActiveCell();
     this.dataset = tmpDataset;
   }
 
diff --git a/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts b/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts
index 16b5fb89b..47d78b85e 100644
--- a/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts
+++ b/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts
@@ -176,6 +176,7 @@ const mockDataView = {
   endUpdate: jest.fn(),
   getItem: jest.fn(),
   getItems: jest.fn(),
+  getLength: jest.fn(),
   getItemMetadata: jest.fn(),
   getPagingInfo: jest.fn(),
   mapIdsToRows: jest.fn(),
@@ -335,7 +336,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
 
   it('should load jQuery mousewheel when using a frozen grid', () => {
     const loadSpy = jest.spyOn(component, 'loadJqueryMousewheelDynamically');
-    component.gridOptions.frozenRow = 3;
+    component.gridOptions.frozenColumn = 3;
 
     component.ngOnInit();
     component.ngAfterViewInit();
@@ -688,7 +689,7 @@ describe('Angular-Slickgrid Custom Component instantiated via Constructor', () =
         component.ngAfterViewInit();
         component.destroy(true);
 
-        expect(spy).toHaveBeenCalledWith();
+        expect(spy).toHaveBeenCalled();
       });
 
       it('should refresh a local grid and change pagination options pagination when a preset for it is defined in grid options', (done) => {
diff --git a/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts b/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts
index d68076ecd..81d5ba4d4 100644
--- a/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts
+++ b/src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid.component.spec.ts
@@ -119,8 +119,6 @@ const treeDataServiceStub = {
 describe('App Component', () => {
   let fixture: ComponentFixture<AngularSlickgridComponent>;
   let component: AngularSlickgridComponent;
-  let graphqlService: GraphqlService;
-  let translate: TranslateService;
 
   beforeEach(async(() => {
     // @ts-ignore
@@ -180,8 +178,6 @@ describe('App Component', () => {
     // create the component
     fixture = TestBed.createComponent(AngularSlickgridComponent);
     component = fixture.debugElement.componentInstance;
-    graphqlService = TestBed.get(GraphqlService);
-    translate = TestBed.get(TranslateService);
 
     // setup bindable properties
     component.gridId = 'grid1';
diff --git a/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts b/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts
index 437860695..f0e9db319 100644
--- a/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts
+++ b/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts
@@ -120,7 +120,7 @@ const slickgridEventPrefix = 'sg';
   ]
 })
 export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnInit {
-  private _dataset: any[];
+  private _dataset: any[] | null;
   private _columnDefinitions: Column[];
   private _eventHandler: SlickEventHandler = new Slick.EventHandler();
   private _angularGridInstances: AngularGridInstance | undefined;
@@ -131,8 +131,8 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
   private _isDatasetInitialized = false;
   private _isPaginationInitialized = false;
   private _isLocalGrid = true;
-  dataView: any;
-  grid: any;
+  dataView: any | null;
+  grid: any | null;
   gridHeightString: string;
   gridWidthString: string;
   groupingDefinition: any = {};
@@ -196,19 +196,19 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
   }
 
   @Input()
-  get datasetHierarchical(): any[] {
+  get datasetHierarchical(): any[] | null {
     return this.sharedService.hierarchicalDataset;
   }
-  set datasetHierarchical(newHierarchicalDataset: any[]) {
+  set datasetHierarchical(newHierarchicalDataset: any[] | null) {
     this.sharedService.hierarchicalDataset = newHierarchicalDataset;
 
-    if (this.filterService && this.filterService.clearFilters) {
+    if (newHierarchicalDataset && this.columnDefinitions && this.filterService && this.filterService.clearFilters) {
       this.filterService.clearFilters();
     }
 
     // when a hierarchical dataset is set afterward, we can reset the flat dataset and call a tree data sort that will overwrite the flat dataset
     setTimeout(() => {
-      if (this.dataView && this.sortService && this.sortService.processTreeDataInitialSort && this.gridOptions && this.gridOptions.enableTreeData) {
+      if (newHierarchicalDataset && this.dataView && this.sortService && this.sortService.processTreeDataInitialSort && this.gridOptions && this.gridOptions.enableTreeData) {
         this.dataView.setItems([], this.gridOptions.datasetIdPropertyName);
         this.sortService.processTreeDataInitialSort();
       }
@@ -254,7 +254,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
   }
 
   ngOnInit(): void {
-    if (this.gridOptions && this.gridOptions.frozenRow >= 0) {
+    if (this.gridOptions && (this.gridOptions.frozenColumn >= 0 || this.gridOptions.frozenRow >= 0)) {
       this.loadJqueryMousewheelDynamically();
     }
 
@@ -285,11 +285,29 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
     if (this._eventHandler && this._eventHandler.unsubscribeAll) {
       this._eventHandler.unsubscribeAll();
     }
-    if (this.dataView && this.dataView.setItems) {
-      this.dataView.setItems([]);
+    if (this.dataView) {
+      if (this.dataView && this.dataView.setItems) {
+        this.dataView.setItems([]);
+      }
+      if (this.dataView.destroy) {
+        this.dataView.destroy();
+      }
     }
     if (this.grid && this.grid.destroy) {
-      this.grid.destroy();
+      this.grid.destroy(shouldEmptyDomElementContainer);
+    }
+
+    if (this.backendServiceApi) {
+      for (const prop of Object.keys(this.backendServiceApi)) {
+        this.backendServiceApi[prop] = null;
+      }
+      this.backendServiceApi = null;
+    }
+    for (const prop of Object.keys(this.columnDefinitions)) {
+      this.columnDefinitions[prop] = null;
+    }
+    for (const prop of Object.keys(this.sharedService)) {
+      this.sharedService[prop] = null;
     }
 
     // we could optionally also empty the content of the grid container DOM element
@@ -299,6 +317,11 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
 
     // also unsubscribe all RxJS subscriptions
     this.subscriptions = unsubscribeAllObservables(this.subscriptions);
+
+    this._dataset = null;
+    this.datasetHierarchical = null;
+    this._columnDefinitions = [];
+    this._angularGridInstances = null;
   }
 
   emptyGridContainerElm() {
@@ -326,11 +349,10 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
       if (backendApi.service instanceof GraphqlService || typeof backendApi.service.getDatasetName === 'function') {
         backendApi.internalPostProcess = (processResult: GraphqlResult | GraphqlPaginatedResult) => {
           const datasetName = (backendApi && backendApi.service && typeof backendApi.service.getDatasetName === 'function') ? backendApi.service.getDatasetName() : '';
-          this._dataset = [];
           if (processResult && processResult.data && processResult.data[datasetName]) {
-            this._dataset = processResult.data[datasetName].hasOwnProperty('nodes') ? (processResult as GraphqlPaginatedResult).data[datasetName].nodes : (processResult as GraphqlResult).data[datasetName];
+            const data = processResult.data[datasetName].hasOwnProperty('nodes') ? (processResult as GraphqlPaginatedResult).data[datasetName].nodes : (processResult as GraphqlResult).data[datasetName];
             const totalCount = processResult.data[datasetName].hasOwnProperty('totalCount') ? (processResult as GraphqlPaginatedResult).data[datasetName].totalCount : (processResult as GraphqlResult).data[datasetName].length;
-            this.refreshGridData(this._dataset, totalCount || 0);
+            this.refreshGridData(data, totalCount || 0);
           }
         };
       }
@@ -786,7 +808,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
     if (!this.customDataView && (this.dataView && this.dataView.beginUpdate && this.dataView.setItems && this.dataView.endUpdate)) {
       this.onDataviewCreated.emit(this.dataView);
       this.dataView.beginUpdate();
-      this.dataView.setItems(this._dataset, this.gridOptions.datasetIdPropertyName);
+      this.dataView.setItems(this._dataset || [], this.gridOptions.datasetIdPropertyName);
       this.dataView.endUpdate();
 
       // if you don't want the items that are not visible (due to being filtered out or being on a different page)
@@ -813,7 +835,8 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
         }
       }
 
-      if (this._dataset.length > 0) {
+      const datasetLn = this.dataView.getLength() || this._dataset && this._dataset.length || 0;
+      if (datasetLn > 0) {
         if (!this._isDatasetInitialized && (this.gridOptions.enableCheckboxSelector || this.gridOptions.enableRowSelection)) {
           this.loadRowSelectionPresetWhenExists();
         }
@@ -1076,7 +1099,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
   private swapInternalEditorToSlickGridFactoryEditor(columnDefinitions: Column[]) {
     return columnDefinitions.map((column: Column | any) => {
       // on every Editor that have a "collectionAsync", resolve the data and assign it to the "collection" property
-      if (column.editor && column.editor.collectionAsync) {
+      if (column && column.editor && column.editor.collectionAsync) {
         this.loadEditorCollectionAsync(column);
       }
       return { ...column, editor: column.editor && column.editor.model, internalColumnEditor: { ...column.editor } };
diff --git a/src/app/modules/angular-slickgrid/editors/__tests__/longTextEditor.spec.ts b/src/app/modules/angular-slickgrid/editors/__tests__/longTextEditor.spec.ts
index 5a242da78..c7c10bf9f 100644
--- a/src/app/modules/angular-slickgrid/editors/__tests__/longTextEditor.spec.ts
+++ b/src/app/modules/angular-slickgrid/editors/__tests__/longTextEditor.spec.ts
@@ -220,7 +220,7 @@ describe('LongTextEditor', () => {
     describe('isValueChanged method', () => {
       it('should return True when previously dispatched keyboard event is a new char "a" and it should also update the text counter accordingly', () => {
         const eventKeyDown = new (window.window as any).KeyboardEvent('keydown', { keyCode: KEY_CHAR_A, bubbles: true, cancelable: true });
-        const eventKeyUp = new (window.window as any).KeyboardEvent('keyup', { keyCode: KEY_CHAR_A, bubbles: true, cancelable: true });
+        const eventInput = new (window.window as any).Event('input', { keyCode: KEY_CHAR_A, bubbles: true, cancelable: true });
         mockColumn.internalColumnEditor.maxLength = 255;
 
         editor = new LongTextEditor(editorArguments);
@@ -230,7 +230,7 @@ describe('LongTextEditor', () => {
         const maxTextLengthElm = document.body.querySelector<HTMLDivElement>('.editor-footer .max-length');
         editor.focus();
         editorElm.dispatchEvent(eventKeyDown);
-        editorElm.dispatchEvent(eventKeyUp);
+        editorElm.dispatchEvent(eventInput);
 
         expect(currentTextLengthElm.textContent).toBe('1');
         expect(maxTextLengthElm.textContent).toBe('255');
diff --git a/src/app/modules/angular-slickgrid/editors/autoCompleteEditor.ts b/src/app/modules/angular-slickgrid/editors/autoCompleteEditor.ts
index 9d9f9011a..758e95289 100644
--- a/src/app/modules/angular-slickgrid/editors/autoCompleteEditor.ts
+++ b/src/app/modules/angular-slickgrid/editors/autoCompleteEditor.ts
@@ -31,7 +31,7 @@ export class AutoCompleteEditor implements Editor {
   private _autoCompleteOptions: AutocompleteOption;
   private _currentValue: any;
   private _defaultTextValue: string;
-  private _elementCollection: any[];
+  private _elementCollection: any[] | null;
   private _lastInputEvent: JQuery.Event;
 
   /** The JQuery DOM element */
@@ -73,7 +73,7 @@ export class AutoCompleteEditor implements Editor {
   }
 
   /** Get the Final Collection used in the AutoCompleted Source (this may vary from the "collection" especially when providing a customStructure) */
-  get elementCollection(): any[] {
+  get elementCollection(): any[] | null {
     return this._elementCollection;
   }
 
@@ -143,8 +143,9 @@ export class AutoCompleteEditor implements Editor {
     if (this._$editorElm) {
       this._$editorElm.autocomplete('destroy');
       this._$editorElm.off('keydown.nav').remove();
-      this._$editorElm = null;
     }
+    this._$editorElm = null;
+    this._elementCollection = null;
   }
 
   focus() {
diff --git a/src/app/modules/angular-slickgrid/editors/longTextEditor.ts b/src/app/modules/angular-slickgrid/editors/longTextEditor.ts
index e444520ee..d6352ec64 100644
--- a/src/app/modules/angular-slickgrid/editors/longTextEditor.ts
+++ b/src/app/modules/angular-slickgrid/editors/longTextEditor.ts
@@ -120,7 +120,7 @@ export class LongTextEditor implements Editor {
     this._$wrapper.find('.btn-save').on('click', () => this.save());
     this._$wrapper.find('.btn-cancel').on('click', () => this.cancel());
     this._$textarea.on('keydown', this.handleKeyDown.bind(this));
-    this._$textarea.on('keyup', this.handleKeyUp.bind(this));
+    this._$textarea.on('input', this.handleOnInputChange.bind(this));
 
     this.position(this.args && this.args.position);
     this._$textarea.focus().select();
@@ -146,7 +146,7 @@ export class LongTextEditor implements Editor {
   destroy() {
     if (this._$textarea) {
       this._$textarea.off('keydown');
-      this._$textarea.off('keyup');
+      this._$textarea.off('input');
     }
     if (this._$wrapper) {
       this._$wrapper.find('.btn-save').off('click');
@@ -268,8 +268,8 @@ export class LongTextEditor implements Editor {
     }
   }
 
-  /** On every keyup event, we'll update the current text length counter */
-  private handleKeyUp(event: KeyboardEvent & { target: HTMLTextAreaElement }) {
+  /** On every input change event, we'll update the current text length counter */
+  private handleOnInputChange(event: KeyboardEvent & { target: HTMLTextAreaElement }) {
     const textLength = event.target.value.length;
     this._$currentLengthElm.text(textLength);
   }
diff --git a/src/app/modules/angular-slickgrid/extensions/cellExternalCopyManagerExtension.ts b/src/app/modules/angular-slickgrid/extensions/cellExternalCopyManagerExtension.ts
index 9f1de71a6..9ee995977 100644
--- a/src/app/modules/angular-slickgrid/extensions/cellExternalCopyManagerExtension.ts
+++ b/src/app/modules/angular-slickgrid/extensions/cellExternalCopyManagerExtension.ts
@@ -20,7 +20,7 @@ declare const $: any;
 @Injectable()
 export class CellExternalCopyManagerExtension implements Extension {
   private _addon: any;
-  private _addonOptions: ExcelCopyBufferOption;
+  private _addonOptions: ExcelCopyBufferOption | null;
   private _cellSelectionModel: any;
   private _eventHandler: SlickEventHandler;
   private _commandQueue: EditCommand[];
@@ -30,7 +30,7 @@ export class CellExternalCopyManagerExtension implements Extension {
     this._eventHandler = new Slick.EventHandler();
   }
 
-  get addonOptions(): ExcelCopyBufferOption {
+  get addonOptions(): ExcelCopyBufferOption | null {
     return this._addonOptions;
   }
 
@@ -49,10 +49,15 @@ export class CellExternalCopyManagerExtension implements Extension {
   dispose() {
     // unsubscribe all SlickGrid events
     this._eventHandler.unsubscribeAll();
+
     if (this._addon && this._addon.destroy) {
       this._addon.destroy();
-      this._addon = null;
     }
+
+    this.extensionUtility.nullifyFunctionNameStartingWithOn(this._addonOptions);
+    this._addon = null;
+    this._addonOptions = null;
+
     if (this._cellSelectionModel && this._cellSelectionModel.destroy) {
       this._cellSelectionModel.destroy();
     }
@@ -60,7 +65,7 @@ export class CellExternalCopyManagerExtension implements Extension {
   }
 
   /** Get the instance of the SlickGrid addon (control or plugin). */
-  getAddonInstance() {
+  getAddonInstance(): any {
     return this._addon;
   }
 
@@ -75,26 +80,28 @@ export class CellExternalCopyManagerExtension implements Extension {
       this._cellSelectionModel = new Slick.CellSelectionModel();
       this.sharedService.grid.setSelectionModel(this._cellSelectionModel);
       this._addon = new Slick.CellExternalCopyManager(this._addonOptions);
-      this.sharedService.grid.registerPlugin(this._addon);
+      if (this._addon) {
+        this.sharedService.grid.registerPlugin(this._addon);
+      }
 
       // hook to all possible events
-      if (this.sharedService.grid && this.sharedService.gridOptions.excelCopyBufferOptions) {
-        if (this.sharedService.gridOptions.excelCopyBufferOptions.onExtensionRegistered) {
-          this.sharedService.gridOptions.excelCopyBufferOptions.onExtensionRegistered(this._addon);
+      if (this.sharedService.grid && this._addonOptions) {
+        if (this._addonOptions.onExtensionRegistered) {
+          this._addonOptions.onExtensionRegistered(this._addon);
         }
         this._eventHandler.subscribe(this._addon.onCopyCells, (e: any, args: { ranges: SelectedRange[] }) => {
-          if (this.sharedService.gridOptions.excelCopyBufferOptions && typeof this.sharedService.gridOptions.excelCopyBufferOptions.onCopyCells === 'function') {
-            this.sharedService.gridOptions.excelCopyBufferOptions.onCopyCells(e, args);
+          if (this._addonOptions && typeof this._addonOptions.onCopyCells === 'function') {
+            this._addonOptions.onCopyCells(e, args);
           }
         });
         this._eventHandler.subscribe(this._addon.onCopyCancelled, (e: any, args: { ranges: SelectedRange[] }) => {
-          if (this.sharedService.gridOptions.excelCopyBufferOptions && typeof this.sharedService.gridOptions.excelCopyBufferOptions.onCopyCancelled === 'function') {
-            this.sharedService.gridOptions.excelCopyBufferOptions.onCopyCancelled(e, args);
+          if (this._addonOptions && typeof this._addonOptions.onCopyCancelled === 'function') {
+            this._addonOptions.onCopyCancelled(e, args);
           }
         });
         this._eventHandler.subscribe(this._addon.onPasteCells, (e: any, args: { ranges: SelectedRange[] }) => {
-          if (this.sharedService.gridOptions.excelCopyBufferOptions && typeof this.sharedService.gridOptions.excelCopyBufferOptions.onPasteCells === 'function') {
-            this.sharedService.gridOptions.excelCopyBufferOptions.onPasteCells(e, args);
+          if (this._addonOptions && typeof this._addonOptions.onPasteCells === 'function') {
+            this._addonOptions.onPasteCells(e, args);
           }
         });
       }
diff --git a/src/app/modules/angular-slickgrid/extensions/cellMenuExtension.ts b/src/app/modules/angular-slickgrid/extensions/cellMenuExtension.ts
index d1b060961..cf137c269 100644
--- a/src/app/modules/angular-slickgrid/extensions/cellMenuExtension.ts
+++ b/src/app/modules/angular-slickgrid/extensions/cellMenuExtension.ts
@@ -23,6 +23,7 @@ declare const Slick: any;
 @Injectable()
 export class CellMenuExtension implements Extension {
   private _addon: any;
+  private _cellMenuOptions: CellMenu | null;
   private _eventHandler: SlickEventHandler;
   private _locales: Locale;
 
@@ -44,8 +45,10 @@ export class CellMenuExtension implements Extension {
 
     if (this._addon && this._addon.destroy) {
       this._addon.destroy();
-      this._addon = null;
     }
+    this.extensionUtility.nullifyFunctionNameStartingWithOn(this._cellMenuOptions);
+    this._addon = null;
+    this._cellMenuOptions = null;
   }
 
   /** Get the instance of the SlickGrid addon (control or plugin). */
@@ -70,7 +73,8 @@ export class CellMenuExtension implements Extension {
 
       // dynamically import the SlickGrid plugin (addon) with RequireJS
       this.extensionUtility.loadExtensionDynamically(ExtensionName.cellMenu);
-      this.sharedService.gridOptions.cellMenu = { ...this.getDefaultCellMenuOptions(), ...this.sharedService.gridOptions.cellMenu };
+      this._cellMenuOptions = { ...this.getDefaultCellMenuOptions(), ...this.sharedService.gridOptions.cellMenu };
+      this.sharedService.gridOptions.cellMenu = this._cellMenuOptions;
 
       // translate the item keys when necessary
       if (this.sharedService.gridOptions.enableTranslate) {
@@ -80,37 +84,37 @@ export class CellMenuExtension implements Extension {
       // sort all menu items by their position order when defined
       this.sortMenuItems(this.sharedService.allColumns);
 
-      this._addon = new Slick.Plugins.CellMenu(this.sharedService.gridOptions.cellMenu);
+      this._addon = new Slick.Plugins.CellMenu(this._cellMenuOptions);
       this.sharedService.grid.registerPlugin(this._addon);
 
       // hook all events
-      if (this.sharedService.grid && this.sharedService.gridOptions.cellMenu) {
-        if (this.sharedService.gridOptions.cellMenu.onExtensionRegistered) {
-          this.sharedService.gridOptions.cellMenu.onExtensionRegistered(this._addon);
+      if (this._cellMenuOptions) {
+        if (this._cellMenuOptions.onExtensionRegistered) {
+          this._cellMenuOptions.onExtensionRegistered(this._addon);
         }
-        if (this.sharedService.gridOptions.cellMenu && typeof this.sharedService.gridOptions.cellMenu.onCommand === 'function') {
+        if (this._cellMenuOptions && typeof this._cellMenuOptions.onCommand === 'function') {
           this._eventHandler.subscribe(this._addon.onCommand, (event: Event, args: MenuCommandItemCallbackArgs) => {
-            this.sharedService.gridOptions.cellMenu.onCommand(event, args);
+            this._cellMenuOptions.onCommand(event, args);
           });
         }
-        if (this.sharedService.gridOptions.cellMenu && typeof this.sharedService.gridOptions.cellMenu.onOptionSelected === 'function') {
+        if (this._cellMenuOptions && typeof this._cellMenuOptions.onOptionSelected === 'function') {
           this._eventHandler.subscribe(this._addon.onOptionSelected, (event: Event, args: MenuOptionItemCallbackArgs) => {
-            this.sharedService.gridOptions.cellMenu.onOptionSelected(event, args);
+            this._cellMenuOptions.onOptionSelected(event, args);
           });
         }
-        if (this.sharedService.gridOptions.cellMenu && typeof this.sharedService.gridOptions.cellMenu.onAfterMenuShow === 'function') {
+        if (this._cellMenuOptions && typeof this._cellMenuOptions.onAfterMenuShow === 'function') {
           this._eventHandler.subscribe(this._addon.onAfterMenuShow, (event: Event, args: { cell: number; row: number; grid: any; }) => {
-            this.sharedService.gridOptions.cellMenu.onAfterMenuShow(event, args);
+            this._cellMenuOptions.onAfterMenuShow(event, args);
           });
         }
-        if (this.sharedService.gridOptions.cellMenu && typeof this.sharedService.gridOptions.cellMenu.onBeforeMenuShow === 'function') {
+        if (this._cellMenuOptions && typeof this._cellMenuOptions.onBeforeMenuShow === 'function') {
           this._eventHandler.subscribe(this._addon.onBeforeMenuShow, (event: Event, args: { cell: number; row: number; grid: any; }) => {
-            this.sharedService.gridOptions.cellMenu.onBeforeMenuShow(event, args);
+            this._cellMenuOptions.onBeforeMenuShow(event, args);
           });
         }
-        if (this.sharedService.gridOptions.cellMenu && typeof this.sharedService.gridOptions.cellMenu.onBeforeMenuClose === 'function') {
+        if (this._cellMenuOptions && typeof this._cellMenuOptions.onBeforeMenuClose === 'function') {
           this._eventHandler.subscribe(this._addon.onBeforeMenuClose, (event: Event, args: { cell: number; row: number; grid: any; menu: any; }) => {
-            this.sharedService.gridOptions.cellMenu.onBeforeMenuClose(event, args);
+            this._cellMenuOptions.onBeforeMenuClose(event, args);
           });
         }
       }
diff --git a/src/app/modules/angular-slickgrid/extensions/checkboxSelectorExtension.ts b/src/app/modules/angular-slickgrid/extensions/checkboxSelectorExtension.ts
index 2c516c169..472ffc298 100644
--- a/src/app/modules/angular-slickgrid/extensions/checkboxSelectorExtension.ts
+++ b/src/app/modules/angular-slickgrid/extensions/checkboxSelectorExtension.ts
@@ -16,8 +16,8 @@ export class CheckboxSelectorExtension implements Extension {
   dispose() {
     if (this._addon && this._addon.destroy) {
       this._addon.destroy();
-      this._addon = null;
     }
+    this._addon = null;
     if (this._rowSelectionPlugin && this._rowSelectionPlugin.destroy) {
       this._rowSelectionPlugin.destroy();
     }
diff --git a/src/app/modules/angular-slickgrid/extensions/columnPickerExtension.ts b/src/app/modules/angular-slickgrid/extensions/columnPickerExtension.ts
index db34f2a16..4eb600cae 100644
--- a/src/app/modules/angular-slickgrid/extensions/columnPickerExtension.ts
+++ b/src/app/modules/angular-slickgrid/extensions/columnPickerExtension.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Extension, ExtensionName, SlickEventHandler } from '../models/index';
+import { ColumnPicker, Extension, ExtensionName, SlickEventHandler } from '../models/index';
 import { ExtensionUtility } from './extensionUtility';
 import { SharedService } from '../services/shared.service';
 
@@ -10,6 +10,7 @@ declare const Slick: any;
 export class ColumnPickerExtension implements Extension {
   private _eventHandler: SlickEventHandler;
   private _addon: any;
+  private _columnPicker: ColumnPicker | null;
 
   constructor(private extensionUtility: ExtensionUtility, private sharedService: SharedService) {
     this._eventHandler = new Slick.EventHandler();
@@ -24,8 +25,9 @@ export class ColumnPickerExtension implements Extension {
     this._eventHandler.unsubscribeAll();
     if (this._addon && this._addon.destroy) {
       this._addon.destroy();
-      this._addon = null;
     }
+    this.extensionUtility.nullifyFunctionNameStartingWithOn(this._columnPicker);
+    this._addon = null;
   }
 
   /** Get the instance of the SlickGrid addon (control or plugin). */
@@ -43,19 +45,20 @@ export class ColumnPickerExtension implements Extension {
       const forceFitTitle = this.extensionUtility.getPickerTitleOutputString('forceFitTitle', 'columnPicker');
       const syncResizeTitle = this.extensionUtility.getPickerTitleOutputString('syncResizeTitle', 'columnPicker');
 
-      this.sharedService.gridOptions.columnPicker = this.sharedService.gridOptions.columnPicker || {};
-      this.sharedService.gridOptions.columnPicker.columnTitle = this.sharedService.gridOptions.columnPicker.columnTitle || columnTitle;
-      this.sharedService.gridOptions.columnPicker.forceFitTitle = this.sharedService.gridOptions.columnPicker.forceFitTitle || forceFitTitle;
-      this.sharedService.gridOptions.columnPicker.syncResizeTitle = this.sharedService.gridOptions.columnPicker.syncResizeTitle || syncResizeTitle;
+      this._columnPicker = this.sharedService.gridOptions.columnPicker || {};
+      this.sharedService.gridOptions.columnPicker = this._columnPicker;
+      this._columnPicker.columnTitle = this._columnPicker.columnTitle || columnTitle;
+      this._columnPicker.forceFitTitle = this._columnPicker.forceFitTitle || forceFitTitle;
+      this._columnPicker.syncResizeTitle = this._columnPicker.syncResizeTitle || syncResizeTitle;
       this._addon = new Slick.Controls.ColumnPicker(this.sharedService.allColumns, this.sharedService.grid, this.sharedService.gridOptions);
 
       if (this.sharedService.grid && this.sharedService.gridOptions.enableColumnPicker) {
-        if (this.sharedService.gridOptions.columnPicker.onExtensionRegistered) {
-          this.sharedService.gridOptions.columnPicker.onExtensionRegistered(this._addon);
+        if (this._columnPicker.onExtensionRegistered) {
+          this._columnPicker.onExtensionRegistered(this._addon);
         }
         this._eventHandler.subscribe(this._addon.onColumnsChanged, (e: any, args: { columns: any, grid: any }) => {
-          if (this.sharedService.gridOptions.columnPicker && typeof this.sharedService.gridOptions.columnPicker.onColumnsChanged === 'function') {
-            this.sharedService.gridOptions.columnPicker.onColumnsChanged(e, args);
+          if (this._columnPicker && typeof this._columnPicker.onColumnsChanged === 'function') {
+            this._columnPicker.onColumnsChanged(e, args);
           }
           if (args && Array.isArray(args.columns) && args.columns.length !== this.sharedService.visibleColumns.length) {
             this.sharedService.visibleColumns = args.columns;
@@ -69,32 +72,30 @@ export class ColumnPickerExtension implements Extension {
 
   /** Translate the Column Picker headers and also the last 2 checkboxes */
   translateColumnPicker() {
-    if (this.sharedService && this.sharedService.grid && this.sharedService.gridOptions) {
-      // update the properties by pointers, that is the only way to get Column Picker Control to see the new values
-      if (this.sharedService.gridOptions.columnPicker) {
-        this.emptyColumnPickerTitles();
-        this.sharedService.gridOptions.columnPicker.columnTitle = this.extensionUtility.getPickerTitleOutputString('columnTitle', 'columnPicker');
-        this.sharedService.gridOptions.columnPicker.forceFitTitle = this.extensionUtility.getPickerTitleOutputString('forceFitTitle', 'columnPicker');
-        this.sharedService.gridOptions.columnPicker.syncResizeTitle = this.extensionUtility.getPickerTitleOutputString('syncResizeTitle', 'columnPicker');
-      }
+    // update the properties by pointers, that is the only way to get Column Picker Control to see the new values
+    if (this._columnPicker) {
+      this.emptyColumnPickerTitles();
+      this._columnPicker.columnTitle = this.extensionUtility.getPickerTitleOutputString('columnTitle', 'columnPicker');
+      this._columnPicker.forceFitTitle = this.extensionUtility.getPickerTitleOutputString('forceFitTitle', 'columnPicker');
+      this._columnPicker.syncResizeTitle = this.extensionUtility.getPickerTitleOutputString('syncResizeTitle', 'columnPicker');
+    }
 
-      // translate all columns (including hidden columns)
-      // eventually deprecate the "headerKey" and use only the "nameKey"
-      this.extensionUtility.translateItems(this.sharedService.allColumns, 'headerKey', 'name');
-      this.extensionUtility.translateItems(this.sharedService.allColumns, 'nameKey', 'name');
+    // translate all columns (including hidden columns)
+    // eventually deprecate the "headerKey" and use only the "nameKey"
+    this.extensionUtility.translateItems(this.sharedService.allColumns, 'headerKey', 'name');
+    this.extensionUtility.translateItems(this.sharedService.allColumns, 'nameKey', 'name');
 
-      // update the Titles of each sections (command, customTitle, ...)
-      if (this._addon && this._addon.updateAllTitles) {
-        this._addon.updateAllTitles(this.sharedService.gridOptions.columnPicker);
-      }
+    // update the Titles of each sections (command, customTitle, ...)
+    if (this._addon && this._addon.updateAllTitles && this._columnPicker) {
+      this._addon.updateAllTitles(this._columnPicker);
     }
   }
 
   private emptyColumnPickerTitles() {
-    if (this.sharedService && this.sharedService.gridOptions && this.sharedService.gridOptions.columnPicker) {
-      this.sharedService.gridOptions.columnPicker.columnTitle = '';
-      this.sharedService.gridOptions.columnPicker.forceFitTitle = '';
-      this.sharedService.gridOptions.columnPicker.syncResizeTitle = '';
+    if (this._columnPicker) {
+      this._columnPicker.columnTitle = '';
+      this._columnPicker.forceFitTitle = '';
+      this._columnPicker.syncResizeTitle = '';
     }
   }
 }
diff --git a/src/app/modules/angular-slickgrid/extensions/contextMenuExtension.ts b/src/app/modules/angular-slickgrid/extensions/contextMenuExtension.ts
index aec3b78f0..b6d15d3e0 100644
--- a/src/app/modules/angular-slickgrid/extensions/contextMenuExtension.ts
+++ b/src/app/modules/angular-slickgrid/extensions/contextMenuExtension.ts
@@ -28,8 +28,9 @@ declare const Slick: any;
 @Injectable()
 export class ContextMenuExtension implements Extension {
   private _addon: any;
+  private _contextMenuOptions: ContextMenu | null;
   private _eventHandler: SlickEventHandler;
-  private _userOriginalContextMenu: ContextMenu;
+  private _userOriginalContextMenu: ContextMenu | undefined;
 
   constructor(
     private excelExportService: ExcelExportService,
@@ -52,11 +53,13 @@ export class ContextMenuExtension implements Extension {
 
     if (this._addon && this._addon.destroy) {
       this._addon.destroy();
-      this._addon = null;
     }
     if (this.sharedService.gridOptions && this.sharedService.gridOptions.contextMenu && this.sharedService.gridOptions.contextMenu.commandItems) {
       this.sharedService.gridOptions.contextMenu = this._userOriginalContextMenu;
     }
+    this.extensionUtility.nullifyFunctionNameStartingWithOn(this._contextMenuOptions);
+    this._addon = null;
+    this._contextMenuOptions = null;
   }
 
   /** Get the instance of the SlickGrid addon (control or plugin). */
@@ -76,24 +79,25 @@ export class ContextMenuExtension implements Extension {
     }
 
     if (this.sharedService && this.sharedService.grid && this.sharedService.gridOptions && this.sharedService.gridOptions.contextMenu) {
-      const contextMenu = this.sharedService.gridOptions.contextMenu;
+      this._contextMenuOptions = this.sharedService.gridOptions.contextMenu;
 
       // keep original user context menu, useful when switching locale to translate
-      this._userOriginalContextMenu = { ...contextMenu };
+      this._userOriginalContextMenu = { ...this._contextMenuOptions };
 
       // dynamically import the SlickGrid plugin (addon) with RequireJS
       this.extensionUtility.loadExtensionDynamically(ExtensionName.contextMenu);
 
       // merge the original commands with the built-in internal commands
       const originalCommandItems = this._userOriginalContextMenu && Array.isArray(this._userOriginalContextMenu.commandItems) ? this._userOriginalContextMenu.commandItems : [];
-      contextMenu.commandItems = [...originalCommandItems, ...this.addMenuCustomCommands(originalCommandItems)];
-      this.sharedService.gridOptions.contextMenu = { ...contextMenu };
+      this._contextMenuOptions.commandItems = [...originalCommandItems, ...this.addMenuCustomCommands(originalCommandItems)];
+      this._contextMenuOptions = { ...this._contextMenuOptions };
+      this.sharedService.gridOptions.contextMenu = this._contextMenuOptions;
 
       // sort all menu items by their position order when defined
-      this.extensionUtility.sortItems(contextMenu.commandItems || [], 'positionOrder');
-      this.extensionUtility.sortItems(contextMenu.optionItems || [], 'positionOrder');
+      this.extensionUtility.sortItems(this._contextMenuOptions.commandItems || [], 'positionOrder');
+      this.extensionUtility.sortItems(this._contextMenuOptions.optionItems || [], 'positionOrder');
 
-      this._addon = new Slick.Plugins.ContextMenu(contextMenu);
+      this._addon = new Slick.Plugins.ContextMenu(this._contextMenuOptions);
       this.sharedService.grid.registerPlugin(this._addon);
 
       // translate the item keys when necessary
@@ -102,33 +106,33 @@ export class ContextMenuExtension implements Extension {
       }
 
       // hook all events
-      if (this.sharedService.grid && contextMenu) {
-        if (contextMenu.onExtensionRegistered) {
-          contextMenu.onExtensionRegistered(this._addon);
+      if (this.sharedService.grid && this._contextMenuOptions) {
+        if (this._contextMenuOptions.onExtensionRegistered) {
+          this._contextMenuOptions.onExtensionRegistered(this._addon);
         }
-        if (contextMenu && typeof contextMenu.onCommand === 'function') {
+        if (this._contextMenuOptions && typeof this._contextMenuOptions.onCommand === 'function') {
           this._eventHandler.subscribe(this._addon.onCommand, (event: Event, args: MenuCommandItemCallbackArgs) => {
-            contextMenu.onCommand(event, args);
+            this._contextMenuOptions.onCommand(event, args);
           });
         }
-        if (contextMenu && typeof contextMenu.onOptionSelected === 'function') {
+        if (this._contextMenuOptions && typeof this._contextMenuOptions.onOptionSelected === 'function') {
           this._eventHandler.subscribe(this._addon.onOptionSelected, (event: Event, args: MenuOptionItemCallbackArgs) => {
-            contextMenu.onOptionSelected(event, args);
+            this._contextMenuOptions.onOptionSelected(event, args);
           });
         }
-        if (contextMenu && typeof contextMenu.onBeforeMenuShow === 'function') {
+        if (this._contextMenuOptions && typeof this._contextMenuOptions.onBeforeMenuShow === 'function') {
           this._eventHandler.subscribe(this._addon.onBeforeMenuShow, (event: Event, args: { cell: number; row: number; grid: any; }) => {
-            contextMenu.onBeforeMenuShow(event, args);
+            this._contextMenuOptions.onBeforeMenuShow(event, args);
           });
         }
-        if (contextMenu && typeof contextMenu.onBeforeMenuClose === 'function') {
+        if (this._contextMenuOptions && typeof this._contextMenuOptions.onBeforeMenuClose === 'function') {
           this._eventHandler.subscribe(this._addon.onBeforeMenuClose, (event: Event, args: { cell: number; row: number; grid: any; menu: any; }) => {
-            contextMenu.onBeforeMenuClose(event, args);
+            this._contextMenuOptions.onBeforeMenuClose(event, args);
           });
         }
-        if (contextMenu && typeof contextMenu.onAfterMenuShow === 'function') {
+        if (this._contextMenuOptions && typeof this._contextMenuOptions.onAfterMenuShow === 'function') {
           this._eventHandler.subscribe(this._addon.onAfterMenuShow, (event: Event, args: { cell: number; row: number; grid: any; }) => {
-            contextMenu.onAfterMenuShow(event, args);
+            this._contextMenuOptions.onAfterMenuShow(event, args);
           });
         }
       }
diff --git a/src/app/modules/angular-slickgrid/extensions/draggableGroupingExtension.ts b/src/app/modules/angular-slickgrid/extensions/draggableGroupingExtension.ts
index 76042f788..51921c2e8 100644
--- a/src/app/modules/angular-slickgrid/extensions/draggableGroupingExtension.ts
+++ b/src/app/modules/angular-slickgrid/extensions/draggableGroupingExtension.ts
@@ -1,6 +1,6 @@
 
 import { SharedService } from '../services/shared.service';
-import { Extension, ExtensionName, GridOption, Grouping, SlickEventHandler } from '../models/index';
+import { DraggableGrouping, Extension, ExtensionName, GridOption, Grouping, SlickEventHandler } from '../models/index';
 import { ExtensionUtility } from './extensionUtility';
 import { Injectable } from '@angular/core';
 
@@ -11,6 +11,7 @@ declare const Slick: any;
 export class DraggableGroupingExtension implements Extension {
   private _eventHandler: SlickEventHandler;
   private _addon: any;
+  private _draggableGroupingOptions: DraggableGrouping | null;
 
   constructor(private extensionUtility: ExtensionUtility, private sharedService: SharedService) {
     this._eventHandler = new Slick.EventHandler();
@@ -26,8 +27,10 @@ export class DraggableGroupingExtension implements Extension {
 
     if (this._addon && this._addon.destroy) {
       this._addon.destroy();
-      this._addon = null;
     }
+    this.extensionUtility.nullifyFunctionNameStartingWithOn(this._draggableGroupingOptions);
+    this._addon = null;
+    this._draggableGroupingOptions = null;
   }
 
   /**
@@ -58,12 +61,13 @@ export class DraggableGroupingExtension implements Extension {
 
       // Events
       if (this.sharedService.grid && this.sharedService.gridOptions.draggableGrouping) {
-        if (this.sharedService.gridOptions.draggableGrouping.onExtensionRegistered) {
-          this.sharedService.gridOptions.draggableGrouping.onExtensionRegistered(this._addon);
+        this._draggableGroupingOptions = this.sharedService.gridOptions.draggableGrouping;
+        if (this._draggableGroupingOptions.onExtensionRegistered) {
+          this._draggableGroupingOptions.onExtensionRegistered(this._addon);
         }
         this._eventHandler.subscribe(this._addon.onGroupChanged, (e: any, args: { caller?: string; groupColumns: Grouping[] }) => {
-          if (this.sharedService.gridOptions.draggableGrouping && typeof this.sharedService.gridOptions.draggableGrouping.onGroupChanged === 'function') {
-            this.sharedService.gridOptions.draggableGrouping.onGroupChanged(e, args);
+          if (this._draggableGroupingOptions && typeof this._draggableGroupingOptions.onGroupChanged === 'function') {
+            this._draggableGroupingOptions.onGroupChanged(e, args);
           }
         });
       }
diff --git a/src/app/modules/angular-slickgrid/extensions/extensionUtility.ts b/src/app/modules/angular-slickgrid/extensions/extensionUtility.ts
index d2fda1fa0..3c0a28eb4 100644
--- a/src/app/modules/angular-slickgrid/extensions/extensionUtility.ts
+++ b/src/app/modules/angular-slickgrid/extensions/extensionUtility.ts
@@ -115,6 +115,20 @@ export class ExtensionUtility {
     return output;
   }
 
+  /**
+   * Loop through object provided and set to null any property found starting with "onX"
+   * @param {Object}: obj
+   */
+  nullifyFunctionNameStartingWithOn(obj?: any) {
+    if (obj) {
+      for (const prop of Object.keys(obj)) {
+        if (prop.startsWith('on')) {
+          obj[prop] = null;
+        }
+      }
+    }
+  }
+
   /**
    * Sort items (by pointers) in an array by a property name
    * @params items array
diff --git a/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts b/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts
index d99196817..9a8eeddf2 100644
--- a/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts
+++ b/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts
@@ -30,6 +30,7 @@ declare const $: any;
 @Injectable()
 export class GridMenuExtension implements Extension {
   private _addon: any;
+  private _gridMenuOptions: GridMenu | null;
   private _areVisibleColumnDifferent = false;
   private _eventHandler: SlickEventHandler;
   private _locales: Locale;
@@ -56,11 +57,13 @@ export class GridMenuExtension implements Extension {
     this._eventHandler.unsubscribeAll();
     if (this._addon && this._addon.destroy) {
       this._addon.destroy();
-      this._addon = null;
     }
     if (this.sharedService.gridOptions && this.sharedService.gridOptions.gridMenu && this.sharedService.gridOptions.gridMenu.customItems) {
       this.sharedService.gridOptions.gridMenu = this._userOriginalGridMenu;
     }
+    this.extensionUtility.nullifyFunctionNameStartingWithOn(this._gridMenuOptions);
+    this._addon = null;
+    this._gridMenuOptions = null;
   }
 
   /** Get the instance of the SlickGrid addon (control or plugin). */
@@ -83,36 +86,37 @@ export class GridMenuExtension implements Extension {
 
       // dynamically import the SlickGrid plugin (addon) with RequireJS
       this.extensionUtility.loadExtensionDynamically(ExtensionName.gridMenu);
-      this.sharedService.gridOptions.gridMenu = { ...this.getDefaultGridMenuOptions(), ...this.sharedService.gridOptions.gridMenu };
+      this._gridMenuOptions = { ...this.getDefaultGridMenuOptions(), ...this.sharedService.gridOptions.gridMenu };
+      this.sharedService.gridOptions.gridMenu = this._gridMenuOptions;
 
       // merge original user grid menu items with internal items
       // then sort all Grid Menu Custom Items (sorted by pointer, no need to use the return)
       const originalCustomItems = this._userOriginalGridMenu && Array.isArray(this._userOriginalGridMenu.customItems) ? this._userOriginalGridMenu.customItems : [];
-      this.sharedService.gridOptions.gridMenu.customItems = [...originalCustomItems, ...this.addGridMenuCustomCommands(originalCustomItems)];
-      this.extensionUtility.translateItems(this.sharedService.gridOptions.gridMenu.customItems, 'titleKey', 'title');
-      this.extensionUtility.sortItems(this.sharedService.gridOptions.gridMenu.customItems, 'positionOrder');
+      this._gridMenuOptions.customItems = [...originalCustomItems, ...this.addGridMenuCustomCommands(originalCustomItems)];
+      this.extensionUtility.translateItems(this._gridMenuOptions.customItems, 'titleKey', 'title');
+      this.extensionUtility.sortItems(this._gridMenuOptions.customItems, 'positionOrder');
 
       this._addon = new Slick.Controls.GridMenu(this.sharedService.allColumns, this.sharedService.grid, this.sharedService.gridOptions);
 
       // hook all events
-      if (this.sharedService.grid && this.sharedService.gridOptions.gridMenu) {
-        if (this.sharedService.gridOptions.gridMenu.onExtensionRegistered) {
-          this.sharedService.gridOptions.gridMenu.onExtensionRegistered(this._addon);
+      if (this._gridMenuOptions) {
+        if (this._gridMenuOptions.onExtensionRegistered) {
+          this._gridMenuOptions.onExtensionRegistered(this._addon);
         }
-        if (this.sharedService.gridOptions.gridMenu && typeof this.sharedService.gridOptions.gridMenu.onBeforeMenuShow === 'function') {
+        if (this._gridMenuOptions && typeof this._gridMenuOptions.onBeforeMenuShow === 'function') {
           this._eventHandler.subscribe(this._addon.onBeforeMenuShow, (e: any, args: { grid: any; menu: any; columns: Column[] }) => {
-            this.sharedService.gridOptions.gridMenu.onBeforeMenuShow(e, args);
+            this._gridMenuOptions.onBeforeMenuShow(e, args);
           });
         }
-        if (this.sharedService.gridOptions.gridMenu && typeof this.sharedService.gridOptions.gridMenu.onAfterMenuShow === 'function') {
+        if (this._gridMenuOptions && typeof this._gridMenuOptions.onAfterMenuShow === 'function') {
           this._eventHandler.subscribe(this._addon.onAfterMenuShow, (e: any, args: { grid: any; menu: any; columns: Column[] }) => {
-            this.sharedService.gridOptions.gridMenu.onAfterMenuShow(e, args);
+            this._gridMenuOptions.onAfterMenuShow(e, args);
           });
         }
         this._eventHandler.subscribe(this._addon.onColumnsChanged, (e: any, args: { grid: any; allColumns: Column[]; columns: Column[]; }) => {
           this._areVisibleColumnDifferent = true;
-          if (this.sharedService.gridOptions.gridMenu && typeof this.sharedService.gridOptions.gridMenu.onColumnsChanged === 'function') {
-            this.sharedService.gridOptions.gridMenu.onColumnsChanged(e, args);
+          if (this._gridMenuOptions && typeof this._gridMenuOptions.onColumnsChanged === 'function') {
+            this._gridMenuOptions.onColumnsChanged(e, args);
           }
           if (args && Array.isArray(args.columns) && args.columns.length > this.sharedService.visibleColumns.length) {
             this.sharedService.visibleColumns = args.columns;
@@ -120,13 +124,13 @@ export class GridMenuExtension implements Extension {
         });
         this._eventHandler.subscribe(this._addon.onCommand, (e: any, args: MenuCommandItemCallbackArgs) => {
           this.executeGridMenuInternalCustomCommands(e, args);
-          if (this.sharedService.gridOptions.gridMenu && typeof this.sharedService.gridOptions.gridMenu.onCommand === 'function') {
-            this.sharedService.gridOptions.gridMenu.onCommand(e, args);
+          if (this._gridMenuOptions && typeof this._gridMenuOptions.onCommand === 'function') {
+            this._gridMenuOptions.onCommand(e, args);
           }
         });
         this._eventHandler.subscribe(this._addon.onMenuClose, (e: any, args: { grid: any; menu: any; allColumns: Column[], visibleColumns: Column[] }) => {
-          if (this.sharedService.gridOptions.gridMenu && typeof this.sharedService.gridOptions.gridMenu.onMenuClose === 'function') {
-            this.sharedService.gridOptions.gridMenu.onMenuClose(e, args);
+          if (this._gridMenuOptions && typeof this._gridMenuOptions.onMenuClose === 'function') {
+            this._gridMenuOptions.onMenuClose(e, args);
           }
 
           // we also want to resize the columns if the user decided to hide certain column(s)
@@ -203,12 +207,12 @@ export class GridMenuExtension implements Extension {
     const translationPrefix = getTranslationPrefix(gridOptions);
 
     // show grid menu: Clear Frozen Columns
-    if (this.sharedService.gridOptions && this.sharedService.gridOptions.gridMenu && !this.sharedService.gridOptions.gridMenu.hideClearFrozenColumnsCommand) {
+    if (this.sharedService.gridOptions && this._gridMenuOptions && !this._gridMenuOptions.hideClearFrozenColumnsCommand) {
       const commandName = 'clear-frozen-columns';
       if (!originalCustomItems.find((item: GridMenuItem) => item.hasOwnProperty('command') && item.command === commandName)) {
         gridMenuCustomItems.push(
           {
-            iconCssClass: this.sharedService.gridOptions.gridMenu.iconClearFrozenColumnsCommand || 'fa fa-times',
+            iconCssClass: this._gridMenuOptions.iconClearFrozenColumnsCommand || 'fa fa-times',
             title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant(`${translationPrefix}CLEAR_FROZEN_COLUMNS`) : this._locales && this._locales.TEXT_CLEAR_FROZEN_COLUMNS,
             disabled: false,
             command: commandName,
@@ -220,12 +224,12 @@ export class GridMenuExtension implements Extension {
 
     if (this.sharedService.gridOptions && (this.sharedService.gridOptions.enableFiltering && !this.sharedService.hideHeaderRowAfterPageLoad)) {
       // show grid menu: Clear all Filters
-      if (this.sharedService.gridOptions && this.sharedService.gridOptions.gridMenu && !this.sharedService.gridOptions.gridMenu.hideClearAllFiltersCommand) {
+      if (this.sharedService.gridOptions && this._gridMenuOptions && !this._gridMenuOptions.hideClearAllFiltersCommand) {
         const commandName = 'clear-filter';
         if (!originalCustomItems.find((item: GridMenuItem) => item.hasOwnProperty('command') && item.command === commandName)) {
           gridMenuCustomItems.push(
             {
-              iconCssClass: this.sharedService.gridOptions.gridMenu.iconClearAllFiltersCommand || 'fa fa-filter text-danger',
+              iconCssClass: this._gridMenuOptions.iconClearAllFiltersCommand || 'fa fa-filter text-danger',
               title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant(`${translationPrefix}CLEAR_ALL_FILTERS`) : this._locales && this._locales.TEXT_CLEAR_ALL_FILTERS,
               disabled: false,
               command: commandName,
@@ -236,12 +240,12 @@ export class GridMenuExtension implements Extension {
       }
 
       // show grid menu: toggle filter row
-      if (this.sharedService.gridOptions && this.sharedService.gridOptions.gridMenu && !this.sharedService.gridOptions.gridMenu.hideToggleFilterCommand) {
+      if (this.sharedService.gridOptions && this._gridMenuOptions && !this._gridMenuOptions.hideToggleFilterCommand) {
         const commandName = 'toggle-filter';
         if (!originalCustomItems.find((item: GridMenuItem) => item.hasOwnProperty('command') && item.command === commandName)) {
           gridMenuCustomItems.push(
             {
-              iconCssClass: this.sharedService.gridOptions.gridMenu.iconToggleFilterCommand || 'fa fa-random',
+              iconCssClass: this._gridMenuOptions.iconToggleFilterCommand || 'fa fa-random',
               title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant(`${translationPrefix}TOGGLE_FILTER_ROW`) : this._locales && this._locales.TEXT_TOGGLE_FILTER_ROW,
               disabled: false,
               command: commandName,
@@ -252,12 +256,12 @@ export class GridMenuExtension implements Extension {
       }
 
       // show grid menu: refresh dataset
-      if (this.sharedService.gridOptions && this.sharedService.gridOptions.gridMenu && !this.sharedService.gridOptions.gridMenu.hideRefreshDatasetCommand && backendApi) {
+      if (this.sharedService.gridOptions && this._gridMenuOptions && !this._gridMenuOptions.hideRefreshDatasetCommand && backendApi) {
         const commandName = 'refresh-dataset';
         if (!originalCustomItems.find((item: GridMenuItem) => item.hasOwnProperty('command') && item.command === commandName)) {
           gridMenuCustomItems.push(
             {
-              iconCssClass: this.sharedService.gridOptions.gridMenu.iconRefreshDatasetCommand || 'fa fa-refresh',
+              iconCssClass: this._gridMenuOptions.iconRefreshDatasetCommand || 'fa fa-refresh',
               title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant(`${translationPrefix}REFRESH_DATASET`) : this._locales && this._locales.TEXT_REFRESH_DATASET,
               disabled: false,
               command: commandName,
@@ -270,12 +274,12 @@ export class GridMenuExtension implements Extension {
 
     if (this.sharedService.gridOptions.showPreHeaderPanel) {
       // show grid menu: toggle pre-header row
-      if (this.sharedService.gridOptions && this.sharedService.gridOptions.gridMenu && !this.sharedService.gridOptions.gridMenu.hideTogglePreHeaderCommand) {
+      if (this.sharedService.gridOptions && this._gridMenuOptions && !this._gridMenuOptions.hideTogglePreHeaderCommand) {
         const commandName = 'toggle-preheader';
         if (!originalCustomItems.find((item: GridMenuItem) => item.hasOwnProperty('command') && item.command === commandName)) {
           gridMenuCustomItems.push(
             {
-              iconCssClass: this.sharedService.gridOptions.gridMenu.iconTogglePreHeaderCommand || 'fa fa-random',
+              iconCssClass: this._gridMenuOptions.iconTogglePreHeaderCommand || 'fa fa-random',
               title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant(`${translationPrefix}TOGGLE_PRE_HEADER_ROW`) : this._locales && this._locales.TEXT_TOGGLE_PRE_HEADER_ROW,
               disabled: false,
               command: commandName,
@@ -288,12 +292,12 @@ export class GridMenuExtension implements Extension {
 
     if (this.sharedService.gridOptions.enableSorting) {
       // show grid menu: Clear all Sorting
-      if (this.sharedService.gridOptions && this.sharedService.gridOptions.gridMenu && !this.sharedService.gridOptions.gridMenu.hideClearAllSortingCommand) {
+      if (this.sharedService.gridOptions && this._gridMenuOptions && !this._gridMenuOptions.hideClearAllSortingCommand) {
         const commandName = 'clear-sorting';
         if (!originalCustomItems.find((item: GridMenuItem) => item.hasOwnProperty('command') && item.command === commandName)) {
           gridMenuCustomItems.push(
             {
-              iconCssClass: this.sharedService.gridOptions.gridMenu.iconClearAllSortingCommand || 'fa fa-unsorted text-danger',
+              iconCssClass: this._gridMenuOptions.iconClearAllSortingCommand || 'fa fa-unsorted text-danger',
               title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant(`${translationPrefix}CLEAR_ALL_SORTING`) : this._locales && this._locales.TEXT_CLEAR_ALL_SORTING,
               disabled: false,
               command: commandName,
@@ -305,12 +309,12 @@ export class GridMenuExtension implements Extension {
     }
 
     // show grid menu: Export to file
-    if (this.sharedService.gridOptions && this.sharedService.gridOptions.enableExport && this.sharedService.gridOptions.gridMenu && !this.sharedService.gridOptions.gridMenu.hideExportCsvCommand) {
+    if (this.sharedService.gridOptions && this.sharedService.gridOptions.enableExport && this._gridMenuOptions && !this._gridMenuOptions.hideExportCsvCommand) {
       const commandName = 'export-csv';
       if (!originalCustomItems.find((item: GridMenuItem) => item.hasOwnProperty('command') && item.command === commandName)) {
         gridMenuCustomItems.push(
           {
-            iconCssClass: this.sharedService.gridOptions.gridMenu.iconExportCsvCommand || 'fa fa-download',
+            iconCssClass: this._gridMenuOptions.iconExportCsvCommand || 'fa fa-download',
             title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant(`${translationPrefix}EXPORT_TO_CSV`) : this._locales && this._locales.TEXT_EXPORT_TO_CSV,
             disabled: false,
             command: commandName,
@@ -321,12 +325,12 @@ export class GridMenuExtension implements Extension {
     }
 
     // show grid menu: Export to Excel
-    if (this.sharedService.gridOptions && this.sharedService.gridOptions.enableExcelExport && this.sharedService.gridOptions.gridMenu && !this.sharedService.gridOptions.gridMenu.hideExportExcelCommand) {
+    if (this.sharedService.gridOptions && this.sharedService.gridOptions.enableExcelExport && this._gridMenuOptions && !this._gridMenuOptions.hideExportExcelCommand) {
       const commandName = 'export-excel';
       if (!originalCustomItems.find((item: GridMenuItem) => item.hasOwnProperty('command') && item.command === commandName)) {
         gridMenuCustomItems.push(
           {
-            iconCssClass: this.sharedService.gridOptions.gridMenu.iconExportExcelCommand || 'fa fa-file-excel-o text-success',
+            iconCssClass: this._gridMenuOptions.iconExportExcelCommand || 'fa fa-file-excel-o text-success',
             title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant(`${translationPrefix}EXPORT_TO_EXCEL`) : this._locales && this._locales.TEXT_EXPORT_TO_EXCEL,
             disabled: false,
             command: commandName,
@@ -337,12 +341,12 @@ export class GridMenuExtension implements Extension {
     }
 
     // show grid menu: export to text file as tab delimited
-    if (this.sharedService.gridOptions && this.sharedService.gridOptions.enableExport && this.sharedService.gridOptions.gridMenu && !this.sharedService.gridOptions.gridMenu.hideExportTextDelimitedCommand) {
+    if (this.sharedService.gridOptions && this.sharedService.gridOptions.enableExport && this._gridMenuOptions && !this._gridMenuOptions.hideExportTextDelimitedCommand) {
       const commandName = 'export-text-delimited';
       if (!originalCustomItems.find((item: GridMenuItem) => item.hasOwnProperty('command') && item.command === commandName)) {
         gridMenuCustomItems.push(
           {
-            iconCssClass: this.sharedService.gridOptions.gridMenu.iconExportTextDelimitedCommand || 'fa fa-download',
+            iconCssClass: this._gridMenuOptions.iconExportTextDelimitedCommand || 'fa fa-download',
             title: this.sharedService.gridOptions.enableTranslate ? this.translate.instant(`${translationPrefix}EXPORT_TO_TAB_DELIMITED`) : this._locales && this._locales.TEXT_EXPORT_TO_TAB_DELIMITED,
             disabled: false,
             command: commandName,
@@ -353,8 +357,8 @@ export class GridMenuExtension implements Extension {
     }
 
     // add the custom "Commands" title if there are any commands
-    if (this.sharedService && this.sharedService.gridOptions && this.sharedService.gridOptions.gridMenu && (Array.isArray(gridMenuCustomItems) && gridMenuCustomItems.length > 0 || (Array.isArray(this.sharedService.gridOptions.gridMenu.customItems) && this.sharedService.gridOptions.gridMenu.customItems.length > 0))) {
-      this.sharedService.gridOptions.gridMenu.customTitle = this.sharedService.gridOptions.gridMenu.customTitle || this.extensionUtility.getPickerTitleOutputString('customTitle', 'gridMenu');
+    if (this.sharedService && this.sharedService.gridOptions && this._gridMenuOptions && (Array.isArray(gridMenuCustomItems) && gridMenuCustomItems.length > 0 || (Array.isArray(this._gridMenuOptions.customItems) && this._gridMenuOptions.customItems.length > 0))) {
+      this._gridMenuOptions.customTitle = this._gridMenuOptions.customTitle || this.extensionUtility.getPickerTitleOutputString('customTitle', 'gridMenu');
     }
 
     return gridMenuCustomItems;
@@ -434,11 +438,11 @@ export class GridMenuExtension implements Extension {
   }
 
   private emptyGridMenuTitles() {
-    if (this.sharedService && this.sharedService.gridOptions && this.sharedService.gridOptions.gridMenu) {
-      this.sharedService.gridOptions.gridMenu.customTitle = '';
-      this.sharedService.gridOptions.gridMenu.columnTitle = '';
-      this.sharedService.gridOptions.gridMenu.forceFitTitle = '';
-      this.sharedService.gridOptions.gridMenu.syncResizeTitle = '';
+    if (this.sharedService && this.sharedService.gridOptions && this._gridMenuOptions) {
+      this._gridMenuOptions.customTitle = '';
+      this._gridMenuOptions.columnTitle = '';
+      this._gridMenuOptions.forceFitTitle = '';
+      this._gridMenuOptions.syncResizeTitle = '';
     }
   }
 
diff --git a/src/app/modules/angular-slickgrid/extensions/groupItemMetaProviderExtension.ts b/src/app/modules/angular-slickgrid/extensions/groupItemMetaProviderExtension.ts
index 89570227c..4683ef2ee 100644
--- a/src/app/modules/angular-slickgrid/extensions/groupItemMetaProviderExtension.ts
+++ b/src/app/modules/angular-slickgrid/extensions/groupItemMetaProviderExtension.ts
@@ -11,8 +11,8 @@ export class GroupItemMetaProviderExtension implements Extension {
   dispose() {
     if (this._addon && this._addon.destroy) {
       this._addon.destroy();
-      this._addon = null;
     }
+    this._addon = null;
   }
 
   /** Get the instance of the SlickGrid addon (control or plugin). */
diff --git a/src/app/modules/angular-slickgrid/extensions/headerButtonExtension.ts b/src/app/modules/angular-slickgrid/extensions/headerButtonExtension.ts
index 14547a99f..075211fcf 100644
--- a/src/app/modules/angular-slickgrid/extensions/headerButtonExtension.ts
+++ b/src/app/modules/angular-slickgrid/extensions/headerButtonExtension.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Extension, ExtensionName, HeaderButtonOnCommandArgs, SlickEventHandler } from '../models/index';
+import { Extension, ExtensionName, HeaderButton, HeaderButtonOnCommandArgs, SlickEventHandler } from '../models/index';
 import { ExtensionUtility } from './extensionUtility';
 import { SharedService } from '../services/shared.service';
 
@@ -10,6 +10,7 @@ declare const Slick: any;
 export class HeaderButtonExtension implements Extension {
   private _eventHandler: SlickEventHandler;
   private _addon: any;
+  private _headerButtonOptions: HeaderButton | null;
 
   constructor(private extensionUtility: ExtensionUtility, private sharedService: SharedService) {
     this._eventHandler = new Slick.EventHandler();
@@ -25,8 +26,10 @@ export class HeaderButtonExtension implements Extension {
 
     if (this._addon && this._addon.destroy) {
       this._addon.destroy();
-      this._addon = null;
     }
+    this.extensionUtility.nullifyFunctionNameStartingWithOn(this._headerButtonOptions);
+    this._addon = null;
+    this._headerButtonOptions = null;
   }
 
   /** Get the instance of the SlickGrid addon (control or plugin). */
@@ -39,17 +42,18 @@ export class HeaderButtonExtension implements Extension {
     if (this.sharedService && this.sharedService.grid && this.sharedService.gridOptions) {
       // dynamically import the SlickGrid plugin (addon) with RequireJS
       this.extensionUtility.loadExtensionDynamically(ExtensionName.headerButton);
-      this._addon = new Slick.Plugins.HeaderButtons(this.sharedService.gridOptions.headerButton || {});
+      this._headerButtonOptions = this.sharedService.gridOptions.headerButton || {};
+      this._addon = new Slick.Plugins.HeaderButtons(this._headerButtonOptions);
       this.sharedService.grid.registerPlugin(this._addon);
 
       // hook all events
-      if (this.sharedService.grid && this.sharedService.gridOptions.headerButton) {
-        if (this.sharedService.gridOptions.headerButton.onExtensionRegistered) {
-          this.sharedService.gridOptions.headerButton.onExtensionRegistered(this._addon);
+      if (this._headerButtonOptions) {
+        if (this._headerButtonOptions.onExtensionRegistered) {
+          this._headerButtonOptions.onExtensionRegistered(this._addon);
         }
         this._eventHandler.subscribe(this._addon.onCommand, (e: any, args: HeaderButtonOnCommandArgs) => {
-          if (this.sharedService.gridOptions.headerButton && typeof this.sharedService.gridOptions.headerButton.onCommand === 'function') {
-            this.sharedService.gridOptions.headerButton.onCommand(e, args);
+          if (this._headerButtonOptions && typeof this._headerButtonOptions.onCommand === 'function') {
+            this._headerButtonOptions.onCommand(e, args);
           }
         });
       }
diff --git a/src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts b/src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts
index 9321f75a2..51a53a21b 100644
--- a/src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts
+++ b/src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts
@@ -47,10 +47,11 @@ export class HeaderMenuExtension implements Extension {
   dispose() {
     // unsubscribe all SlickGrid events
     this._eventHandler.unsubscribeAll();
+
     if (this._addon && this._addon.destroy) {
       this._addon.destroy();
-      this._addon = null;
     }
+    this._addon = null;
   }
 
   /** Get the instance of the SlickGrid addon (control or plugin). */
diff --git a/src/app/modules/angular-slickgrid/extensions/rowDetailViewExtension.ts b/src/app/modules/angular-slickgrid/extensions/rowDetailViewExtension.ts
index 530f2f616..c4307e2e4 100644
--- a/src/app/modules/angular-slickgrid/extensions/rowDetailViewExtension.ts
+++ b/src/app/modules/angular-slickgrid/extensions/rowDetailViewExtension.ts
@@ -26,6 +26,7 @@ export interface CreatedView {
 export class RowDetailViewExtension implements Extension {
   rowDetailContainer: ViewContainerRef;
   private _addon: any;
+  private _addonOptions: RowDetailView;
   private _eventHandler: SlickEventHandler;
   private _preloadComponent: Type<object>;
   private _views: CreatedView[] = [];
@@ -66,8 +67,9 @@ export class RowDetailViewExtension implements Extension {
 
     if (this._addon && this._addon.destroy) {
       this._addon.destroy();
-      this._addon = null;
     }
+    this.extensionUtility.nullifyFunctionNameStartingWithOn(this._addonOptions);
+    this._addonOptions = null;
 
     // also unsubscribe all RxJS subscriptions
     this._subscriptions = unsubscribeAllObservables(this._subscriptions);
@@ -116,7 +118,8 @@ export class RowDetailViewExtension implements Extension {
           }
 
           // finally register the Row Detail View Plugin
-          this._addon = new Slick.Plugins.RowDetailView(gridOptions.rowDetailView);
+          this._addonOptions = gridOptions.rowDetailView;
+          this._addon = new Slick.Plugins.RowDetailView(this._addonOptions);
         }
         const iconColumn: Column = this._addon.getColumnDefinition();
         if (typeof iconColumn === 'object') {
diff --git a/src/app/modules/angular-slickgrid/extensions/rowSelectionExtension.ts b/src/app/modules/angular-slickgrid/extensions/rowSelectionExtension.ts
index 30bbf7630..25db4b41c 100644
--- a/src/app/modules/angular-slickgrid/extensions/rowSelectionExtension.ts
+++ b/src/app/modules/angular-slickgrid/extensions/rowSelectionExtension.ts
@@ -15,8 +15,8 @@ export class RowSelectionExtension implements Extension {
   dispose() {
     if (this._addon && this._addon.destroy) {
       this._addon.destroy();
-      this._addon = null;
     }
+    this._addon = null;
   }
 
   /** Get the instance of the SlickGrid addon (control or plugin). */
diff --git a/src/app/modules/angular-slickgrid/filters/__tests__/autoCompleteFilter.spec.ts b/src/app/modules/angular-slickgrid/filters/__tests__/autoCompleteFilter.spec.ts
index 7c97cabfa..a8e3602d0 100644
--- a/src/app/modules/angular-slickgrid/filters/__tests__/autoCompleteFilter.spec.ts
+++ b/src/app/modules/angular-slickgrid/filters/__tests__/autoCompleteFilter.spec.ts
@@ -163,7 +163,7 @@ describe('AutoCompleteFilter', () => {
 
     filterElm.focus();
     filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 109, bubbles: true, cancelable: true }));
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 109, bubbles: true, cancelable: true }));
+    filterElm.dispatchEvent(new (window.window as any).Event('input', { keyCode: 109, bubbles: true, cancelable: true }));
     const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('input.filter-gender.filled');
     const autocompleteListElms = document.body.querySelectorAll<HTMLLIElement>('ul.ui-autocomplete li');
 
@@ -182,7 +182,7 @@ describe('AutoCompleteFilter', () => {
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-gender');
 
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterElm.dispatchEvent(new (window.window as any).Event('input', { keyCode: 97, bubbles: true, cancelable: true }));
     const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('input.filter-gender.filled');
 
     expect(filterFilledElms.length).toBe(1);
@@ -200,7 +200,7 @@ describe('AutoCompleteFilter', () => {
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-gender');
 
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterElm.dispatchEvent(new (window.window as any).Event('input', { keyCode: 97, bubbles: true, cancelable: true }));
     const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('input.filter-gender.filled');
 
     expect(filterFilledElms.length).toBe(1);
@@ -216,7 +216,7 @@ describe('AutoCompleteFilter', () => {
 
     filterElm.focus();
     filterElm.value = 'a';
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterElm.dispatchEvent(new (window.window as any).Event('input', { keyCode: 97, bubbles: true, cancelable: true }));
     const autocompleteListElms = document.body.querySelectorAll<HTMLLIElement>('ul.ui-autocomplete li');
 
     // expect(autocompleteListElms.length).toBe(2);
@@ -289,7 +289,7 @@ describe('AutoCompleteFilter', () => {
       filter.setValues('male');
 
       filterElm.focus();
-      filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+      filterElm.dispatchEvent(new (window.window as any).Event('input', { keyCode: 97, bubbles: true, cancelable: true }));
       const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('input.filter-gender.filled');
 
       expect(autocompleteUlElms.length).toBe(1);
@@ -311,7 +311,7 @@ describe('AutoCompleteFilter', () => {
       filter.setValues('male');
 
       filterElm.focus();
-      filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+      filterElm.dispatchEvent(new (window.window as any).Event('input', { keyCode: 97, bubbles: true, cancelable: true }));
 
       // after await (or timeout delay) we'll get the Subject Observable
       mockCollection.push('other');
diff --git a/src/app/modules/angular-slickgrid/filters/__tests__/compoundInputFilter.spec.ts b/src/app/modules/angular-slickgrid/filters/__tests__/compoundInputFilter.spec.ts
index 557c1b07f..30ecf7269 100644
--- a/src/app/modules/angular-slickgrid/filters/__tests__/compoundInputFilter.spec.ts
+++ b/src/app/modules/angular-slickgrid/filters/__tests__/compoundInputFilter.spec.ts
@@ -117,13 +117,47 @@ describe('CompoundInputFilter', () => {
     const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-duration input');
 
     filterInputElm.focus();
-    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterInputElm.dispatchEvent(new (window.window as any).Event('input', { keyCode: 97, bubbles: true, cancelable: true }));
     const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.search-filter.filter-duration.filled');
 
     expect(filterFilledElms.length).toBe(1);
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['abc'], shouldTriggerQuery: true });
   });
 
+  it('should call "setValues" and expect that value to be in the callback when triggered by ENTER key', () => {
+    const spyCallback = jest.spyOn(filterArguments, 'callback');
+
+    filter.init(filterArguments);
+    filter.setValues(['abc']);
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-duration input');
+
+    filterInputElm.focus();
+    const event = new (window.window as any).Event('keyup', { bubbles: true, cancelable: true });
+    event.key = 'Enter';
+    filterInputElm.dispatchEvent(event);
+    const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.search-filter.filter-duration.filled');
+
+    expect(filterFilledElms.length).toBe(1);
+    expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['abc'], shouldTriggerQuery: true });
+  });
+
+  it('should call "setValues" and expect that value NOT to be in the callback when triggered by a keyup event that is NOT the ENTER key', () => {
+    const spyCallback = jest.spyOn(filterArguments, 'callback');
+
+    filter.init(filterArguments);
+    filter.setValues(['abc']);
+    const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-duration input');
+
+    filterInputElm.focus();
+    const event = new (window.window as any).Event('keyup', { bubbles: true, cancelable: true });
+    event.key = 'a';
+    filterInputElm.dispatchEvent(event);
+    const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('.search-filter.filter-duration.filled');
+
+    expect(filterFilledElms.length).toBe(0);
+    expect(spyCallback).not.toHaveBeenCalled();
+  });
+
   it('should call "setValues" with "operator" set in the filter arguments and expect that value to be in the callback when triggered', () => {
     mockColumn.type = FieldType.number;
     const filterArgs = { ...filterArguments, operator: '>' } as FilterArguments;
@@ -134,7 +168,7 @@ describe('CompoundInputFilter', () => {
     const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-duration input');
 
     filterInputElm.focus();
-    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterInputElm.dispatchEvent(new (window.window as any).Event('input', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '>', searchTerms: ['9'], shouldTriggerQuery: true });
   });
@@ -179,7 +213,7 @@ describe('CompoundInputFilter', () => {
     const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-duration input');
 
     filterInputElm.focus();
-    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterInputElm.dispatchEvent(new (window.window as any).Event('input', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '>', searchTerms: ['987'], shouldTriggerQuery: true });
   });
@@ -196,7 +230,7 @@ describe('CompoundInputFilter', () => {
     const filterInputElm = divContainer.querySelector<HTMLInputElement>('.search-filter.filter-duration input');
 
     filterInputElm.focus();
-    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterInputElm.dispatchEvent(new (window.window as any).Event('input', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '>', searchTerms: ['987'], shouldTriggerQuery: true });
   });
@@ -209,7 +243,7 @@ describe('CompoundInputFilter', () => {
 
     filterInputElm.focus();
     filterInputElm.value = 'a';
-    filterInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterInputElm.dispatchEvent(new (window.window as any).Event('input', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['a'], shouldTriggerQuery: true });
   });
diff --git a/src/app/modules/angular-slickgrid/filters/__tests__/inputFilter.spec.ts b/src/app/modules/angular-slickgrid/filters/__tests__/inputFilter.spec.ts
index ef319032d..d174d1835 100644
--- a/src/app/modules/angular-slickgrid/filters/__tests__/inputFilter.spec.ts
+++ b/src/app/modules/angular-slickgrid/filters/__tests__/inputFilter.spec.ts
@@ -77,14 +77,48 @@ describe('InputFilter', () => {
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-duration');
 
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterElm.dispatchEvent(new (window.window as any).Event('input', { keyCode: 97, bubbles: true, cancelable: true }));
     const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('input.filter-duration.filled');
 
     expect(filterFilledElms.length).toBe(1);
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['abc'], shouldTriggerQuery: true });
   });
 
-  it('should call "setValues" an operator and with with extra spaces at the beginning of the searchTerms and trim value when "enableFilterTrimWhiteSpace" is enabled in grid options', () => {
+  it('should call "setValues" and expect that value to be in the callback when triggered by ENTER key', () => {
+    const spyCallback = jest.spyOn(filterArguments, 'callback');
+
+    filter.init(filterArguments);
+    filter.setValues('abc');
+    const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-duration');
+
+    filterElm.focus();
+    const event = new (window.window as any).Event('keyup', { bubbles: true, cancelable: true });
+    event.key = 'Enter';
+    filterElm.dispatchEvent(event);
+    const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('input.filter-duration.filled');
+
+    expect(filterFilledElms.length).toBe(1);
+    expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['abc'], shouldTriggerQuery: true });
+  });
+
+  it('should call "setValues" and expect that value NOT to be in the callback when triggered by a keyup event that is NOT the ENTER key', () => {
+    const spyCallback = jest.spyOn(filterArguments, 'callback');
+
+    filter.init(filterArguments);
+    filter.setValues('abc');
+    const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-duration');
+
+    filterElm.focus();
+    const event = new (window.window as any).Event('keyup', { bubbles: true, cancelable: true });
+    event.key = 'a';
+    filterElm.dispatchEvent(event);
+    const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('input.filter-duration.filled');
+
+    expect(filterFilledElms.length).toBe(0);
+    expect(spyCallback).not.toHaveBeenCalled();
+  });
+
+  it('should call "setValues" an operator and with extra spaces at the beginning of the searchTerms and trim value when "enableFilterTrimWhiteSpace" is enabled in grid options', () => {
     gridOptionMock.enableFilterTrimWhiteSpace = true;
     const spyCallback = jest.spyOn(filterArguments, 'callback');
 
@@ -93,7 +127,7 @@ describe('InputFilter', () => {
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-duration');
 
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterElm.dispatchEvent(new (window.window as any).Event('input', { keyCode: 97, bubbles: true, cancelable: true }));
     const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('input.filter-duration.filled');
 
     expect(filterFilledElms.length).toBe(1);
@@ -110,7 +144,7 @@ describe('InputFilter', () => {
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-duration');
 
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterElm.dispatchEvent(new (window.window as any).Event('input', { keyCode: 97, bubbles: true, cancelable: true }));
     const filterFilledElms = divContainer.querySelectorAll<HTMLInputElement>('input.filter-duration.filled');
 
     expect(filterFilledElms.length).toBe(1);
@@ -125,7 +159,7 @@ describe('InputFilter', () => {
 
     filterElm.focus();
     filterElm.value = 'a';
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterElm.dispatchEvent(new (window.window as any).Event('input', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['a'], shouldTriggerQuery: true });
   });
diff --git a/src/app/modules/angular-slickgrid/filters/__tests__/inputMaskFilter.spec.ts b/src/app/modules/angular-slickgrid/filters/__tests__/inputMaskFilter.spec.ts
index 7c3f9ebd0..2ba48f3a1 100644
--- a/src/app/modules/angular-slickgrid/filters/__tests__/inputMaskFilter.spec.ts
+++ b/src/app/modules/angular-slickgrid/filters/__tests__/inputMaskFilter.spec.ts
@@ -83,12 +83,12 @@ describe('InputMaskFilter', () => {
     filter.setValues('1234567890');
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-mask');
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('input', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['1234567890'], shouldTriggerQuery: true });
   });
 
-  it('should call "setValues" an operator and with with 10 digits and expect input value to be formatted as a phone as the mask format specifies', () => {
+  it('should call "setValues" an operator and with 10 digits and expect input value to be formatted as a phone as the mask format specifies', () => {
     mockColumn.filter.params = { mask: '(000) 000-0000' };
     const spyCallback = jest.spyOn(filterArguments, 'callback');
 
@@ -96,7 +96,7 @@ describe('InputMaskFilter', () => {
     filter.setValues('1234567890', 'EQ');
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-mask');
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('input', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(filterElm.value).toBe('(123) 456-7890');
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['1234567890'], shouldTriggerQuery: true });
@@ -110,7 +110,7 @@ describe('InputMaskFilter', () => {
     filter.setValues('1234567890abc');
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-mask');
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('input', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(filterElm.value).toBe('(123) 456-7890');
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['1234567890'], shouldTriggerQuery: true });
@@ -124,7 +124,7 @@ describe('InputMaskFilter', () => {
     filter.setValues('1234567890');
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-mask');
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('input', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(filterElm.value).toBe('(123) 456-7890');
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['1234567890'], shouldTriggerQuery: true });
@@ -138,7 +138,7 @@ describe('InputMaskFilter', () => {
     filter.setValues('H1H1H1');
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-mask');
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('input', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(filterElm.value).toBe('H1H 1H1');
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['H1H1H1'], shouldTriggerQuery: true });
@@ -153,7 +153,7 @@ describe('InputMaskFilter', () => {
     filter.setValues('   1234567890  ');
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-mask');
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('input', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(filterElm.value).toBe('(123) 456-7890');
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['1234567890'], shouldTriggerQuery: true });
@@ -169,7 +169,7 @@ describe('InputMaskFilter', () => {
     filter.setValues('   1234567890  ');
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-mask');
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('input', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(filterElm.value).toBe('(123) 456-7890');
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: ['1234567890'], shouldTriggerQuery: true });
@@ -183,7 +183,7 @@ describe('InputMaskFilter', () => {
     filter.setValues('abc');
     const filterElm = divContainer.querySelector<HTMLInputElement>('input.filter-mask');
     filterElm.focus();
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('input', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(filterElm.value).toBe('() -');
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: '', searchTerms: [''], shouldTriggerQuery: true });
@@ -198,7 +198,7 @@ describe('InputMaskFilter', () => {
 
     filterElm.focus();
     filterElm.value = '1';
-    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('keyup', { keyCode: 97, bubbles: true, cancelable: true }));
+    filterElm.dispatchEvent(new (window.window as any).KeyboardEvent('input', { keyCode: 97, bubbles: true, cancelable: true }));
 
     expect(spyCallback).toHaveBeenCalledWith(expect.anything(), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['1'], shouldTriggerQuery: true });
   });
diff --git a/src/app/modules/angular-slickgrid/filters/autoCompleteFilter.ts b/src/app/modules/angular-slickgrid/filters/autoCompleteFilter.ts
index 0bf27e795..bcdbc579c 100644
--- a/src/app/modules/angular-slickgrid/filters/autoCompleteFilter.ts
+++ b/src/app/modules/angular-slickgrid/filters/autoCompleteFilter.ts
@@ -29,7 +29,7 @@ declare const $: any;
 export class AutoCompleteFilter implements Filter {
   private _autoCompleteOptions: AutocompleteOption;
   private _clearFilterTriggered = false;
-  private _collection: any[];
+  private _collection: any[] | null;
   private _shouldTriggerQuery = true;
 
   /** DOM Element Name, useful for auto-detecting positioning (dropup / dropdown) */
@@ -78,7 +78,7 @@ export class AutoCompleteFilter implements Filter {
   }
 
   /** Getter for the Collection Used by the Filter */
-  get collection(): any[] {
+  get collection(): any[] | null {
     return this._collection;
   }
 
@@ -183,7 +183,7 @@ export class AutoCompleteFilter implements Filter {
       this._shouldTriggerQuery = shouldTriggerQuery;
       this.searchTerms = [];
       this.$filterElm.val('');
-      this.$filterElm.trigger('keyup');
+      this.$filterElm.trigger('input');
     }
   }
 
@@ -191,13 +191,14 @@ export class AutoCompleteFilter implements Filter {
    * destroy the filter
    */
   destroy() {
-    if (this.$filterElm) {
-      this.$filterElm.autocomplete('destroy');
-      this.$filterElm.off('keyup').remove();
-      this.$filterElm = null;
-    }
     // also unsubscribe all RxJS subscriptions
     this.subscriptions = unsubscribeAllObservables(this.subscriptions);
+
+    if (this.$filterElm) {
+      this.$filterElm.off('input').remove();
+    }
+    this.$filterElm = null;
+    this._collection = null;
   }
 
   /** Set value(s) on the DOM element */
@@ -250,10 +251,8 @@ export class AutoCompleteFilter implements Filter {
   }
 
   protected async renderOptionsAsync(collectionAsync: Promise<any> | Observable<any> | Subject<any>): Promise<boolean> {
-    let awaitedCollection: any = [];
-
     if (collectionAsync) {
-      awaitedCollection = await castToPromise(collectionAsync);
+      const awaitedCollection = await castToPromise(collectionAsync);
       this.renderDomElementFromCollectionAsync(awaitedCollection);
 
       // because we accept Promises & HttpClient Observable only execute once
@@ -322,9 +321,9 @@ export class AutoCompleteFilter implements Filter {
     this._collection = newCollection;
     this.$filterElm = this.createDomElement(filterTemplate, newCollection, searchTerm);
 
-    // step 3, subscribe to the keyup event and run the callback when that happens
+    // step 3, subscribe to the input change event and run the callback when that happens
     // also add/remove "filled" class for styling purposes
-    this.$filterElm.on('keyup', (e: any) => {
+    this.$filterElm.on('input', (e: any) => {
       let value = e && e.target && e.target.value || '';
       const enableWhiteSpaceTrim = this.gridOptions.enableFilterTrimWhiteSpace || this.columnFilter.enableTrimWhiteSpace;
       if (typeof value === 'string' && enableWhiteSpaceTrim) {
diff --git a/src/app/modules/angular-slickgrid/filters/compoundDateFilter.ts b/src/app/modules/angular-slickgrid/filters/compoundDateFilter.ts
index c61f41114..bb4ec8eb1 100644
--- a/src/app/modules/angular-slickgrid/filters/compoundDateFilter.ts
+++ b/src/app/modules/angular-slickgrid/filters/compoundDateFilter.ts
@@ -142,11 +142,13 @@ export class CompoundDateFilter implements Filter {
     }
     if (this.$filterElm) {
       this.$filterElm.off('keyup').remove();
-      this.$filterElm = null;
     }
     if (this.$selectOperatorElm) {
       this.$selectOperatorElm.off('change').remove();
     }
+    this.$filterElm = null;
+    this.callback = null;
+    this.onTriggerEvent = null;
   }
 
   hide() {
diff --git a/src/app/modules/angular-slickgrid/filters/compoundInputFilter.ts b/src/app/modules/angular-slickgrid/filters/compoundInputFilter.ts
index bcda1066f..f06214fcb 100644
--- a/src/app/modules/angular-slickgrid/filters/compoundInputFilter.ts
+++ b/src/app/modules/angular-slickgrid/filters/compoundInputFilter.ts
@@ -97,14 +97,10 @@ export class CompoundInputFilter implements Filter {
     // and initialize it if searchTerms is filled
     this.$filterElm = this.createDomElement(searchTerm);
 
-    // step 3, subscribe to the keyup event and run the callback when that happens
+    // step 3, subscribe to the input change event and run the callback when that happens
     // also add/remove "filled" class for styling purposes
-    this.$filterInputElm.on('keyup input change', (e: any) => {
-      this.onTriggerEvent(e);
-    });
-    this.$selectOperatorElm.on('change', (e: any) => {
-      this.onTriggerEvent(e);
-    });
+    this.$filterInputElm.on('keyup input', this.onTriggerEvent.bind(this));
+    this.$selectOperatorElm.on('change', this.onTriggerEvent.bind(this));
   }
 
   /**
@@ -126,11 +122,13 @@ export class CompoundInputFilter implements Filter {
    */
   destroy() {
     if (this.$filterElm && this.$selectOperatorElm) {
-      this.$filterElm.off('keyup input change').remove();
+      this.$filterElm.off('keyup input').remove();
       this.$selectOperatorElm.off('change');
-      this.$filterElm = null;
-      this.$selectOperatorElm = null;
     }
+    this.$filterElm = null;
+    this.$selectOperatorElm = null;
+    this.callback = null;
+    this.onTriggerEvent = null;
   }
 
   /** Set value(s) on the DOM element */
@@ -253,7 +251,12 @@ export class CompoundInputFilter implements Filter {
     return $filterContainerElm;
   }
 
-  private onTriggerEvent(e: Event | undefined) {
+  private onTriggerEvent(e: KeyboardEvent | undefined) {
+    // we'll use the "input" event for everything (keyup, change, mousewheel & spinner)
+    // with 1 small exception, we need to use the keyup event to handle ENTER key, everything will be processed by the "input" event
+    if (e && e.type === 'keyup' && e.key !== 'Enter') {
+      return;
+    }
     if (this._clearFilterTriggered) {
       this.callback(e, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered, shouldTriggerQuery: this._shouldTriggerQuery });
       this.$filterElm.removeClass('filled');
diff --git a/src/app/modules/angular-slickgrid/filters/compoundSliderFilter.ts b/src/app/modules/angular-slickgrid/filters/compoundSliderFilter.ts
index 25a38cff6..c857685b7 100644
--- a/src/app/modules/angular-slickgrid/filters/compoundSliderFilter.ts
+++ b/src/app/modules/angular-slickgrid/filters/compoundSliderFilter.ts
@@ -105,14 +105,10 @@ export class CompoundSliderFilter implements Filter {
     // and initialize it if searchTerm is filled
     this.$filterElm = this.createDomElement(searchTerm);
 
-    // step 3, subscribe to the keyup event and run the callback when that happens
+    // step 3, subscribe to the input change event and run the callback when that happens
     // also add/remove "filled" class for styling purposes
-    this.$filterInputElm.change((e: any) => {
-      this.onTriggerEvent(e);
-    });
-    this.$selectOperatorElm.change((e: any) => {
-      this.onTriggerEvent(e);
-    });
+    this.$filterInputElm.on('change', this.onTriggerEvent.bind(this));
+    this.$selectOperatorElm.on('change', this.onTriggerEvent.bind(this));
 
     // if user chose to display the slider number on the right side, then update it every time it changes
     // we need to use both "input" and "change" event to be all cross-browser
@@ -157,10 +153,12 @@ export class CompoundSliderFilter implements Filter {
     if (this.$filterInputElm) {
       this.$filterInputElm.off('input change').remove();
       this.$selectOperatorElm.off('change').remove();
-      this.$filterInputElm = null;
-      this.$filterElm = null;
-      this.$selectOperatorElm = null;
     }
+    this.$filterInputElm = null;
+    this.$filterElm = null;
+    this.$selectOperatorElm = null;
+    this.callback = null;
+    this.onTriggerEvent = null;
   }
 
   /**
diff --git a/src/app/modules/angular-slickgrid/filters/dateRangeFilter.ts b/src/app/modules/angular-slickgrid/filters/dateRangeFilter.ts
index 8ecb7034d..f3f4d2d2d 100644
--- a/src/app/modules/angular-slickgrid/filters/dateRangeFilter.ts
+++ b/src/app/modules/angular-slickgrid/filters/dateRangeFilter.ts
@@ -124,12 +124,14 @@ export class DateRangeFilter implements Filter {
       if (this.flatInstance.element) {
         destroyObjectDomElementProps(this.flatInstance);
       }
-      this.flatInstance = null;
     }
     if (this.$filterElm) {
       this.$filterElm.off('keyup').remove();
-      this.$filterElm = null;
     }
+    this.flatInstance = null;
+    this.$filterElm = null;
+    this.callback = null;
+    this.onTriggerEvent = null;
   }
 
   hide() {
diff --git a/src/app/modules/angular-slickgrid/filters/inputFilter.ts b/src/app/modules/angular-slickgrid/filters/inputFilter.ts
index d114cf079..b986f7271 100644
--- a/src/app/modules/angular-slickgrid/filters/inputFilter.ts
+++ b/src/app/modules/angular-slickgrid/filters/inputFilter.ts
@@ -83,26 +83,9 @@ export class InputFilter implements Filter {
     // step 2, create the DOM Element of the filter & initialize it if searchTerm is filled
     this.$filterElm = this.createDomElement(filterTemplate, searchTerm);
 
-    // step 3, subscribe to the keyup event and run the callback when that happens
+    // step 3, subscribe to the input change event and run the callback when that happens
     // also add/remove "filled" class for styling purposes
-    this.$filterElm.on('keyup input change', (e: any) => {
-      let value = e && e.target && e.target.value || '';
-      const enableWhiteSpaceTrim = this.gridOptions.enableFilterTrimWhiteSpace || this.columnFilter.enableTrimWhiteSpace;
-      if (typeof value === 'string' && enableWhiteSpaceTrim) {
-        value = value.trim();
-      }
-
-      if (this._clearFilterTriggered) {
-        this.callback(e, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered, shouldTriggerQuery: this._shouldTriggerQuery });
-        this.$filterElm.removeClass('filled');
-      } else {
-        value === '' ? this.$filterElm.removeClass('filled') : this.$filterElm.addClass('filled');
-        this.callback(e, { columnDef: this.columnDef, operator: this.operator, searchTerms: [value], shouldTriggerQuery: this._shouldTriggerQuery });
-      }
-      // reset both flags for next use
-      this._clearFilterTriggered = false;
-      this._shouldTriggerQuery = true;
-    });
+    this.$filterElm.on('keyup input', this.handleInputChange.bind(this));
   }
 
   /**
@@ -114,7 +97,7 @@ export class InputFilter implements Filter {
       this._shouldTriggerQuery = shouldTriggerQuery;
       this.searchTerms = [];
       this.$filterElm.val('');
-      this.$filterElm.trigger('keyup');
+      this.$filterElm.trigger('input');
     }
   }
 
@@ -123,9 +106,10 @@ export class InputFilter implements Filter {
    */
   destroy() {
     if (this.$filterElm) {
-      this.$filterElm.off('keyup input change').remove();
-      this.$filterElm = null;
+      this.$filterElm.off('keyup input').remove();
     }
+    this.$filterElm = null;
+    this.callback = null;
   }
 
   /** Set value(s) on the DOM element */
@@ -181,4 +165,28 @@ export class InputFilter implements Filter {
 
     return $filterElm;
   }
+
+  protected handleInputChange(e: any) {
+    // we'll use the "input" event for everything (keyup, change, mousewheel & spinner)
+    // with 1 small exception, we need to use the keyup event to handle ENTER key, everything will be processed by the "input" event
+    if (e && e.type === 'keyup' && e.key !== 'Enter') {
+      return;
+    }
+    let value = e && e.target && e.target.value || '';
+    const enableWhiteSpaceTrim = this.gridOptions.enableFilterTrimWhiteSpace || this.columnFilter.enableTrimWhiteSpace;
+    if (typeof value === 'string' && enableWhiteSpaceTrim) {
+      value = value.trim();
+    }
+
+    if (this._clearFilterTriggered) {
+      this.callback(e, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered, shouldTriggerQuery: this._shouldTriggerQuery });
+      this.$filterElm.removeClass('filled');
+    } else {
+      value === '' ? this.$filterElm.removeClass('filled') : this.$filterElm.addClass('filled');
+      this.callback(e, { columnDef: this.columnDef, operator: this.operator, searchTerms: [value], shouldTriggerQuery: this._shouldTriggerQuery });
+    }
+    // reset both flags for next use
+    this._clearFilterTriggered = false;
+    this._shouldTriggerQuery = true;
+  }
 }
diff --git a/src/app/modules/angular-slickgrid/filters/inputMaskFilter.ts b/src/app/modules/angular-slickgrid/filters/inputMaskFilter.ts
index b9968c19f..fbc63efae 100644
--- a/src/app/modules/angular-slickgrid/filters/inputMaskFilter.ts
+++ b/src/app/modules/angular-slickgrid/filters/inputMaskFilter.ts
@@ -48,10 +48,10 @@ export class InputMaskFilter extends InputFilter {
     // step 2, create the DOM Element of the filter & initialize it if searchTerm is filled
     this.$filterElm = this.createDomElement(filterTemplate, searchTerm);
 
-    // step 3, subscribe to the keyup event and run the callback when that happens
+    // step 3, subscribe to the input change event and run the callback when that happens
     // also add/remove "filled" class for styling purposes
 
-    this.$filterElm.on('keyup input change', (e: any) => {
+    this.$filterElm.on('keyup input', (e: any) => {
       let value = '';
       if (e && e.target && e.target.value) {
         let targetValue = e.target.value;
diff --git a/src/app/modules/angular-slickgrid/filters/nativeSelectFilter.ts b/src/app/modules/angular-slickgrid/filters/nativeSelectFilter.ts
index 57ef028cf..d3b63e015 100644
--- a/src/app/modules/angular-slickgrid/filters/nativeSelectFilter.ts
+++ b/src/app/modules/angular-slickgrid/filters/nativeSelectFilter.ts
@@ -124,8 +124,9 @@ export class NativeSelectFilter implements Filter {
   destroy() {
     if (this.$filterElm) {
       this.$filterElm.off('change').remove();
-      this.$filterElm = null;
     }
+    this.$filterElm = null;
+    this.callback = null;
   }
 
   /**
diff --git a/src/app/modules/angular-slickgrid/filters/selectFilter.ts b/src/app/modules/angular-slickgrid/filters/selectFilter.ts
index ecc4dfcdf..ef25d20a2 100644
--- a/src/app/modules/angular-slickgrid/filters/selectFilter.ts
+++ b/src/app/modules/angular-slickgrid/filters/selectFilter.ts
@@ -181,16 +181,18 @@ export class SelectFilter implements Filter {
    * destroy the filter
    */
   destroy() {
+    // also dispose of all Subscriptions
+    this.subscriptions = unsubscribeAllObservables(this.subscriptions);
+
     if (this.$filterElm && typeof this.$filterElm.multipleSelect === 'function') {
       this.$filterElm.multipleSelect('destroy');
       this.$filterElm.remove();
       const elementClassName = this.elementName.toString().replace('.', '\\.'); // make sure to escape any dot "." from CSS class to avoid console error
       $(`[name=${elementClassName}].ms-drop`).remove();
-      this.$filterElm = null;
     }
-
-    // also dispose of all Subscriptions
-    this.subscriptions = unsubscribeAllObservables(this.subscriptions);
+    this.$filterElm = null;
+    this.callback = null;
+    this.onTriggerEvent = null;
   }
 
   /**
@@ -312,6 +314,7 @@ export class SelectFilter implements Filter {
     let collection: any[] = [];
     if (inputCollection.length > 0) {
       collection = [...inputCollection];
+      inputCollection = null;
     }
 
     // user can optionally add a blank entry at the beginning of the collection
diff --git a/src/app/modules/angular-slickgrid/filters/sliderFilter.ts b/src/app/modules/angular-slickgrid/filters/sliderFilter.ts
index 3ea10e499..1f2af89c4 100644
--- a/src/app/modules/angular-slickgrid/filters/sliderFilter.ts
+++ b/src/app/modules/angular-slickgrid/filters/sliderFilter.ts
@@ -141,9 +141,10 @@ export class SliderFilter implements Filter {
   destroy() {
     if (this.$filterInputElm) {
       this.$filterInputElm.off('input change').remove();
-      this.$filterInputElm = null;
-      this.$filterElm = null;
     }
+    this.$filterInputElm = null;
+    this.$filterElm = null;
+    this.callback = null;
   }
 
   /**
diff --git a/src/app/modules/angular-slickgrid/filters/sliderRangeFilter.ts b/src/app/modules/angular-slickgrid/filters/sliderRangeFilter.ts
index d1411428a..ce94a497b 100644
--- a/src/app/modules/angular-slickgrid/filters/sliderRangeFilter.ts
+++ b/src/app/modules/angular-slickgrid/filters/sliderRangeFilter.ts
@@ -123,9 +123,11 @@ export class SliderRangeFilter implements Filter {
       this.$filterElm.slider('destroy');
       this.$filterElm.off('change').remove();
       this.$filterContainerElm.remove();
-      this.$filterElm = null;
-      this.$filterContainerElm = null;
     }
+    this.$filterElm = null;
+    this.$filterContainerElm = null;
+    this.callback = null;
+    this.onValueChanged = null;
   }
 
   /**
diff --git a/src/app/modules/angular-slickgrid/services/__tests__/filter.service.spec.ts b/src/app/modules/angular-slickgrid/services/__tests__/filter.service.spec.ts
index b129a2587..250436f73 100644
--- a/src/app/modules/angular-slickgrid/services/__tests__/filter.service.spec.ts
+++ b/src/app/modules/angular-slickgrid/services/__tests__/filter.service.spec.ts
@@ -311,14 +311,14 @@ describe('FilterService', () => {
       mockArgs = { grid: gridStub, column: mockColumn, node: document.getElementById(DOM_ELEMENT_ID) };
     });
 
-    it('should execute the callback normally when a keyup event is triggered and searchTerms are defined', () => {
+    it('should execute the callback normally when a input change event is triggered and searchTerms are defined', () => {
       const expectationColumnFilter = { columnDef: mockColumn, columnId: 'firstName', operator: 'EQ', searchTerms: ['John'] };
       const spySearchChange = jest.spyOn(service.onSearchChange, 'notify');
 
       service.init(gridStub);
       service.bindLocalOnFilter(gridStub);
       gridStub.onHeaderRowCellRendered.notify(mockArgs, new Slick.EventData(), gridStub);
-      service.getFiltersMetadata()[0].callback(new Event('keyup'), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['John'], shouldTriggerQuery: true });
+      service.getFiltersMetadata()[0].callback(new Event('input'), { columnDef: mockColumn, operator: 'EQ', searchTerms: ['John'], shouldTriggerQuery: true });
 
       expect(service.getColumnFilters()).toContainEntry(['firstName', expectationColumnFilter]);
       expect(spySearchChange).toHaveBeenCalledWith({
@@ -333,7 +333,7 @@ describe('FilterService', () => {
       }, expect.anything());
     });
 
-    it('should execute the callback normally when a keyup event is triggered and the searchTerm comes from this event.target', () => {
+    it('should execute the callback normally when a input change event is triggered and the searchTerm comes from this event.target', () => {
       const expectationColumnFilter = { columnDef: mockColumn, columnId: 'firstName', operator: 'EQ', searchTerms: ['John'] };
       const spySearchChange = jest.spyOn(service.onSearchChange, 'notify');
 
@@ -341,7 +341,7 @@ describe('FilterService', () => {
       service.bindLocalOnFilter(gridStub);
       gridStub.onHeaderRowCellRendered.notify(mockArgs, new Slick.EventData(), gridStub);
 
-      const mockEvent = new Event('keyup');
+      const mockEvent = new Event('input');
       Object.defineProperty(mockEvent, 'target', { writable: true, configurable: true, value: { value: 'John' } });
       service.getFiltersMetadata()[0].callback(mockEvent, { columnDef: mockColumn, operator: 'EQ', shouldTriggerQuery: true });
 
@@ -362,7 +362,7 @@ describe('FilterService', () => {
       service.init(gridStub);
       service.bindLocalOnFilter(gridStub);
       gridStub.onHeaderRowCellRendered.notify(mockArgs, new Slick.EventData(), gridStub);
-      service.getFiltersMetadata()[0].callback(new Event('keyup'), { columnDef: mockColumn, operator: 'EQ', searchTerms: [''], shouldTriggerQuery: true });
+      service.getFiltersMetadata()[0].callback(new Event('input'), { columnDef: mockColumn, operator: 'EQ', searchTerms: [''], shouldTriggerQuery: true });
 
       expect(service.getColumnFilters()).toEqual({});
     });
@@ -418,8 +418,8 @@ describe('FilterService', () => {
       gridStub.onHeaderRowCellRendered.notify(mockArgs1, new Slick.EventData(), gridStub);
       gridStub.onHeaderRowCellRendered.notify(mockArgs2, new Slick.EventData(), gridStub);
       gridStub.onHeaderRowCellRendered.notify(mockArgs3, new Slick.EventData(), gridStub);
-      service.getFiltersMetadata()[0].callback(new Event('keyup'), { columnDef: mockColumn1, operator: 'EQ', searchTerms: ['John'], shouldTriggerQuery: true });
-      service.getFiltersMetadata()[1].callback(new Event('keyup'), { columnDef: mockColumn2, operator: 'NE', searchTerms: ['Doe'], shouldTriggerQuery: true });
+      service.getFiltersMetadata()[0].callback(new Event('input'), { columnDef: mockColumn1, operator: 'EQ', searchTerms: ['John'], shouldTriggerQuery: true });
+      service.getFiltersMetadata()[1].callback(new Event('input'), { columnDef: mockColumn2, operator: 'NE', searchTerms: ['Doe'], shouldTriggerQuery: true });
     });
 
     describe('clearFilterByColumnId method', () => {
@@ -556,8 +556,8 @@ describe('FilterService', () => {
       service.bindLocalOnFilter(gridStub);
       gridStub.onHeaderRowCellRendered.notify(mockArgs1, new Slick.EventData(), gridStub);
       gridStub.onHeaderRowCellRendered.notify(mockArgs2, new Slick.EventData(), gridStub);
-      service.getFiltersMetadata()[0].callback(new Event('keyup'), { columnDef: mockColumn1, operator: 'EQ', searchTerms: ['John'], shouldTriggerQuery: true });
-      service.getFiltersMetadata()[1].callback(new Event('keyup'), { columnDef: mockColumn2, operator: 'NE', searchTerms: ['Doe'], shouldTriggerQuery: true });
+      service.getFiltersMetadata()[0].callback(new Event('input'), { columnDef: mockColumn1, operator: 'EQ', searchTerms: ['John'], shouldTriggerQuery: true });
+      service.getFiltersMetadata()[1].callback(new Event('input'), { columnDef: mockColumn2, operator: 'NE', searchTerms: ['Doe'], shouldTriggerQuery: true });
     });
 
     describe('clearFilterByColumnId method', () => {
@@ -895,8 +895,8 @@ describe('FilterService', () => {
       const spy = jest.spyOn(gridOptionMock.backendServiceApi.service, 'processOnFilterChanged').mockReturnValue('backend query');
 
       service.init(gridStub);
-      const mockEvent = new Event('keyup');
-      Object.defineProperty(new Event('keyup'), 'target', { writable: true, configurable: true, value: { value: 'John' } });
+      const mockEvent = new Event('input');
+      Object.defineProperty(new Event('input'), 'target', { writable: true, configurable: true, value: { value: 'John' } });
 
       // @ts-ignore
       service.onBackendFilterChange(mockEvent, { grid: gridStub, shouldTriggerQuery: true });
diff --git a/src/app/modules/angular-slickgrid/services/filter.service.ts b/src/app/modules/angular-slickgrid/services/filter.service.ts
index b3d7bf287..8d3f0ed22 100644
--- a/src/app/modules/angular-slickgrid/services/filter.service.ts
+++ b/src/app/modules/angular-slickgrid/services/filter.service.ts
@@ -46,7 +46,7 @@ export class FilterService {
   private _filtersMetadata: any[] = [];
   private _columnFilters: ColumnFilters = {};
   private _grid: any;
-  private _onSearchChange: SlickEvent;
+  private _onSearchChange: SlickEvent | null;
   private _tmpPreFilteredData: number[];
   private httpCancelRequests$: Subject<void> = new Subject<void>(); // this will be used to cancel any pending http request
   onFilterChanged = new Subject<CurrentFilter[]>();
@@ -68,7 +68,7 @@ export class FilterService {
   }
 
   /** Getter of the SlickGrid Event Handler */
-  get onSearchChange(): SlickEvent {
+  get onSearchChange(): SlickEvent | null {
     return this._onSearchChange;
   }
 
@@ -96,8 +96,6 @@ export class FilterService {
   }
 
   dispose() {
-    this.disposeColumnFilters();
-
     // unsubscribe all SlickGrid events
     if (this._eventHandler && this._eventHandler.unsubscribeAll) {
       this._eventHandler.unsubscribeAll();
@@ -105,6 +103,13 @@ export class FilterService {
     if (isObservable(this.httpCancelRequests$)) {
       this.httpCancelRequests$.next(); // this cancels any pending http requests
     }
+    this.disposeColumnFilters();
+    this._onSearchChange = null;
+    this.addFilterTemplateToHeaderRow = null;
+    this.customLocalFilter = null;
+    this.callbackSearchEvent = null;
+    this.handleBackendOnSearchChange = null;
+    this.handleLocalOnSearchChange = null;
   }
 
   /**
@@ -129,6 +134,7 @@ export class FilterService {
         }
       });
     }
+    this._filtersMetadata = [];
   }
 
   /**
@@ -153,20 +159,24 @@ export class FilterService {
     this._filtersMetadata = [];
 
     // 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 it changes to being filled and equal, then we would know that it was already rendered
-      // this is to avoid rendering the filter twice (only the Select Filter for now), rendering it again also clears the filter which has unwanted side effect
-      if (args.column.id === this._firstColumnIdRendered) {
-        this._isFilterFirstRender = false;
-      }
-      this.addFilterTemplateToHeaderRow(args, this._isFilterFirstRender);
-      if (this._firstColumnIdRendered === '') {
-        this._firstColumnIdRendered = args.column.id;
-      }
-    });
+    this._eventHandler.subscribe(grid.onHeaderRowCellRendered, this.handleBackendOnSearchChange.bind(this));
 
     // subscribe to the SlickGrid event and call the backend execution
-    this._eventHandler.subscribe(this._onSearchChange, this.onBackendFilterChange.bind(this));
+    if (this._onSearchChange) {
+      this._eventHandler.subscribe(this._onSearchChange, this.onBackendFilterChange.bind(this));
+    }
+  }
+
+  handleBackendOnSearchChange(_e: KeyboardEvent, args: any) {
+    // firstColumnIdRendered is null at first, so if it changes to being filled and equal, then we would know that it was already rendered
+    // this is to avoid rendering the filter twice (only the Select Filter for now), rendering it again also clears the filter which has unwanted side effect
+    if (args.column.id === this._firstColumnIdRendered) {
+      this._isFilterFirstRender = false;
+    }
+    this.addFilterTemplateToHeaderRow(null, args, this._isFilterFirstRender);
+    if (this._firstColumnIdRendered === '') {
+      this._firstColumnIdRendered = args.column.id;
+    }
   }
 
   /**
@@ -180,30 +190,33 @@ export class FilterService {
     this._dataView.setFilterArgs({ columnFilters: this._columnFilters, grid: this._grid, dataView: this._dataView });
     this._dataView.setFilter(this.customLocalFilter.bind(this));
 
-    this._eventHandler.subscribe(this._onSearchChange, (_e: KeyboardEvent, args: any) => {
-      const isGridWithTreeData = this._gridOptions && this._gridOptions.enableTreeData || false;
+    // bind any search filter change (e.g. input filter input change event)
+    if (this._onSearchChange) {
+      this._eventHandler.subscribe(this._onSearchChange, this.handleLocalOnSearchChange.bind(this));
 
-      // When using Tree Data, we need to do it in 2 steps
-      // step 1. we need to prefilter (search) the data prior, the result will be an array of IDs which are the node(s) and their parent nodes when necessary.
-      // step 2. calling the DataView.refresh() is what triggers the final filtering, with "customLocalFilter()" which will decide which rows should persist
-      if (isGridWithTreeData) {
-        this._tmpPreFilteredData = this.preFilterTreeData(this._dataView.getItems(), this._columnFilters);
-      }
+      // subscribe to SlickGrid onHeaderRowCellRendered event to create filter template
+      this._eventHandler.subscribe(grid.onHeaderRowCellRendered, this.addFilterTemplateToHeaderRow.bind(this));
+    }
+  }
 
-      const columnId = args.columnId;
-      if (columnId !== null) {
-        this._dataView.refresh();
-      }
-      // emit an onFilterChanged event when it's not called by a clear filter
-      if (args && !args.clearFilterTriggered) {
-        this.emitFilterChanged(EmitterType.local);
-      }
-    });
+  handleLocalOnSearchChange(_e: KeyboardEvent, args: any) {
+    const isGridWithTreeData = this._gridOptions && this._gridOptions.enableTreeData || false;
 
-    // subscribe to SlickGrid onHeaderRowCellRendered event to create filter template
-    this._eventHandler.subscribe(grid.onHeaderRowCellRendered, (_e: KeyboardEvent, args: any) => {
-      this.addFilterTemplateToHeaderRow(args);
-    });
+    // When using Tree Data, we need to do it in 2 steps
+    // step 1. we need to prefilter (search) the data prior, the result will be an array of IDs which are the node(s) and their parent nodes when necessary.
+    // step 2. calling the DataView.refresh() is what triggers the final filtering, with "customLocalFilter()" which will decide which rows should persist
+    if (isGridWithTreeData) {
+      this._tmpPreFilteredData = this.preFilterTreeData(this._dataView.getItems(), this._columnFilters);
+    }
+
+    const columnId = args.columnId;
+    if (columnId !== null) {
+      this._dataView.refresh();
+    }
+    // emit an onFilterChanged event when it's not called by a clear filter
+    if (args && !args.clearFilterTriggered) {
+      this.emitFilterChanged(EmitterType.local);
+    }
   }
 
   clearFilterByColumnId(event: Event, columnId: number | string) {
@@ -759,7 +772,7 @@ export class FilterService {
   // -------------------
 
   /** Add all created filters (from their template) to the header row section area */
-  private addFilterTemplateToHeaderRow(args: { column: Column; grid: any; node: HTMLElement }, isFilterFirstRender = true) {
+  private addFilterTemplateToHeaderRow(_event: Event, args: { column: Column; grid: any; node: HTMLElement }, isFilterFirstRender = true) {
     const columnDef = args.column;
     const columnId = columnDef && columnDef.id || '';
 
@@ -809,7 +822,7 @@ export class FilterService {
 
   /**
    * Callback method that is called and executed by the individual Filter (DOM element),
-   * for example when user type in a word to search (which uses InputFilter), this Filter will execute the callback from a keyup event.
+   * for example when user type in a word to search (which uses InputFilter), this Filter will execute the callback from an input change event.
    */
   private callbackSearchEvent(event: any, args: FilterCallbackArg) {
     if (args) {
@@ -846,8 +859,9 @@ export class FilterService {
       const eventData = (event && typeof event.isPropagationStopped !== 'function') ? $.extend({}, new Slick.EventData(), event) : event;
 
       // trigger an event only if Filters changed or if ENTER key was pressed
+      const eventKey = event && event.key;
       const eventKeyCode = event && event.keyCode;
-      if (eventKeyCode === KeyCode.ENTER || !isequal(oldColumnFilters, this._columnFilters)) {
+      if (this._onSearchChange && (eventKey === 'Enter' || eventKeyCode === KeyCode.ENTER || !isequal(oldColumnFilters, this._columnFilters))) {
         this._onSearchChange.notify({
           clearFilterTriggered: args.clearFilterTriggered,
           shouldTriggerQuery: args.shouldTriggerQuery,
diff --git a/src/app/modules/angular-slickgrid/services/gridEvent.service.ts b/src/app/modules/angular-slickgrid/services/gridEvent.service.ts
index a86104b7f..36ad8ff8f 100644
--- a/src/app/modules/angular-slickgrid/services/gridEvent.service.ts
+++ b/src/app/modules/angular-slickgrid/services/gridEvent.service.ts
@@ -14,67 +14,83 @@ export class GridEventService {
     this._eventHandler = new Slick.EventHandler();
   }
 
+  dispose() {
+    this._eventHandler.unsubscribeAll();
+    this.handleOnCellChange = null;
+    this.handleOnCellClick = null;
+  }
+
   /* OnCellChange Event */
   bindOnCellChange(grid: any, dataView: any) {
     // subscribe to this Slickgrid event of onCellChange
     this._eventHandler.subscribe(grid.onCellChange, (e: KeyboardEvent | MouseEvent, args: CellArgs) => {
-      if (!e || !args || !grid || args.cell === undefined || !grid.getColumns || !grid.getDataItem) {
-        return;
-      }
-      const column: Column = grid.getColumns()[args.cell];
-
-      // if the column definition has a onCellChange property (a callback function), then run it
-      if (typeof column.onCellChange === 'function') {
-        // add to the output gridOptions & dataView since we'll need them inside the AJAX column.onCellChange
-        const returnedArgs: OnEventArgs = {
-          row: args.row,
-          cell: args.cell,
-          dataView,
-          grid,
-          columnDef: column,
-          dataContext: grid.getDataItem(args.row)
-        };
-
-        // finally call up the Slick.column.onCellChanges.... function
-        column.onCellChange(e, returnedArgs);
-      }
+      this.handleOnCellChange.call(this, grid, dataView, e, args);
     });
   }
 
   /* OnClick Event */
   bindOnClick(grid: any, dataView: any) {
     this._eventHandler.subscribe(grid.onClick, (e: KeyboardEvent | MouseEvent, args: CellArgs) => {
-      if (!e || !args || !grid || args.cell === undefined || !grid.getColumns || !grid.getDataItem) {
-        return;
-      }
-      const column: Column = grid && grid.getColumns && grid.getColumns()[args.cell];
-      const gridOptions: GridOption = grid && grid.getOptions && grid.getOptions() || {};
+      this.handleOnCellClick.call(this, grid, dataView, e, args);
+    });
+  }
 
-      // only when using autoCommitEdit, we will make the cell active (in focus) when clicked
-      // setting the cell as active as a side effect and if autoCommitEdit is set to false then the Editors won't save correctly
-      if (gridOptions.enableCellNavigation && (!gridOptions.editable || (gridOptions.editable && gridOptions.autoCommitEdit))) {
-        grid.setActiveCell(args.row, args.cell);
-      }
+  //
+  // private functions
+  // ------------------
 
-      // if the column definition has a onCellClick property (a callback function), then run it
-      if (typeof column.onCellClick === 'function') {
-        // add to the output gridOptions & dataView since we'll need them inside the AJAX column.onClick
-        const returnedArgs: OnEventArgs = {
-          row: args.row,
-          cell: args.cell,
-          dataView,
-          grid,
-          columnDef: column,
-          dataContext: grid.getDataItem(args.row)
-        };
+  /* OnCellChange Event Handler */
+  handleOnCellChange(grid: any, dataView: any, e: KeyboardEvent | MouseEvent, args: CellArgs) {
+    if (!e || !args || !grid || args.cell === undefined || !grid.getColumns || !grid.getDataItem) {
+      return;
+    }
+    const column: Column = grid.getColumns()[args.cell];
 
-        // finally call up the Slick.column.onCellClick.... function
-        column.onCellClick(e, returnedArgs);
-      }
-    });
+    // if the column definition has a onCellChange property (a callback function), then run it
+    if (typeof column.onCellChange === 'function') {
+      // add to the output gridOptions & dataView since we'll need them inside the AJAX column.onCellChange
+      const returnedArgs: OnEventArgs = {
+        row: args.row,
+        cell: args.cell,
+        dataView,
+        grid,
+        columnDef: column,
+        dataContext: grid.getDataItem(args.row)
+      };
+
+      // finally call up the Slick.column.onCellChanges.... function
+      column.onCellChange(e, returnedArgs);
+    }
   }
 
-  dispose() {
-    this._eventHandler.unsubscribeAll();
+  /* OnCellClick Event Handler */
+  private handleOnCellClick(grid: any, dataView: any, e: KeyboardEvent | MouseEvent, args: CellArgs) {
+    if (!e || !args || !grid || args.cell === undefined || !grid.getColumns || !grid.getDataItem) {
+      return;
+    }
+    const column: Column = grid && grid.getColumns && grid.getColumns()[args.cell];
+    const gridOptions: GridOption = grid && grid.getOptions && grid.getOptions() || {};
+
+    // only when using autoCommitEdit, we will make the cell active (in focus) when clicked
+    // setting the cell as active as a side effect and if autoCommitEdit is set to false then the Editors won't save correctly
+    if (gridOptions.enableCellNavigation && (!gridOptions.editable || (gridOptions.editable && gridOptions.autoCommitEdit))) {
+      grid.setActiveCell(args.row, args.cell);
+    }
+
+    // if the column definition has a onCellClick property (a callback function), then run it
+    if (typeof column.onCellClick === 'function') {
+      // add to the output gridOptions & dataView since we'll need them inside the AJAX column.onClick
+      const returnedArgs: OnEventArgs = {
+        row: args.row,
+        cell: args.cell,
+        dataView,
+        grid,
+        columnDef: column,
+        dataContext: grid.getDataItem(args.row)
+      };
+
+      // finally call up the Slick.column.onCellClick.... function
+      column.onCellClick(e, returnedArgs);
+    }
   }
 }
diff --git a/src/app/modules/angular-slickgrid/services/shared.service.ts b/src/app/modules/angular-slickgrid/services/shared.service.ts
index 8b15f52ed..daa291eaa 100644
--- a/src/app/modules/angular-slickgrid/services/shared.service.ts
+++ b/src/app/modules/angular-slickgrid/services/shared.service.ts
@@ -11,7 +11,7 @@ export class SharedService {
   private _currentPagination: CurrentPagination;
   private _hideHeaderRowAfterPageLoad = false;
   private _visibleColumns: Column[];
-  private _hierarchicalDataset: any[];
+  private _hierarchicalDataset: any[] | null;
   onColumnsChanged = new Subject<Column[]>();
 
   // --
@@ -97,12 +97,12 @@ export class SharedService {
   }
 
   /** Getter for the Hierarchical Tree Data dataset when the feature is enabled */
-  get hierarchicalDataset(): any[] {
+  get hierarchicalDataset(): any[] | null {
     return this._hierarchicalDataset;
   }
 
   /** Getter for the Hierarchical Tree Data dataset when the feature is enabled */
-  set hierarchicalDataset(hierarchicalDataset: any[]) {
+  set hierarchicalDataset(hierarchicalDataset: any[] | null) {
     this._hierarchicalDataset = hierarchicalDataset;
   }
 }
diff --git a/src/app/modules/angular-slickgrid/services/treeData.service.ts b/src/app/modules/angular-slickgrid/services/treeData.service.ts
index 5073fd242..ee9afc2b9 100644
--- a/src/app/modules/angular-slickgrid/services/treeData.service.ts
+++ b/src/app/modules/angular-slickgrid/services/treeData.service.ts
@@ -18,7 +18,7 @@ export class TreeDataService {
     return this.dataView && this.dataView.getItems && this.dataView.getItems();
   }
 
-  get datasetHierarchical(): any[] | undefined {
+  get datasetHierarchical(): any[] | null {
     return this.sharedService.hierarchicalDataset;
   }
 
diff --git a/test/cypress/package.json b/test/cypress/package.json
index 819256f82..15916558c 100644
--- a/test/cypress/package.json
+++ b/test/cypress/package.json
@@ -10,7 +10,7 @@
   "author": "Ghislain B.",
   "license": "MIT",
   "devDependencies": {
-    "cypress": "^5.5.0",
+    "cypress": "^5.6.0",
     "mocha": "^8.2.0",
     "mochawesome": "^6.1.1"
   }