fix(core): Flatpickr is not destroyed properly & leaks detached elements

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts

@@ -286,11 +286,9 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
     }
     if (this.dataView && this.dataView.setItems) {
       this.dataView.setItems([]);
-      this.dataView = null;
     }
     if (this.grid && this.grid.destroy) {
       this.grid.destroy();
-      this.grid = null;
     }
 
     // we could optionally also empty the content of the grid container DOM element

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

@@ -7,7 +7,7 @@ const flatpickr: FlatpickrFn = _flatpickr as any; // patch for rollup
 const moment = moment_; // patch to fix rollup "moment has no default export" issue, document here https://github.com/rollup/rollup/issues/670
 
 import { Constants } from './../constants';
-import { mapFlatpickrDateFormatWithFieldType, mapMomentDateFormatWithFieldType, setDeepValue, getDescendantProperty } from './../services/utilities';
+import { destroyObjectDomElementProps, getDescendantProperty, mapFlatpickrDateFormatWithFieldType, mapMomentDateFormatWithFieldType, setDeepValue } from './../services/utilities';
 import {
   Column,
   ColumnEditor,
@@ -160,19 +160,22 @@ export class DateEditor implements Editor {
 
   destroy() {
     this.hide();
-    this._$input.remove();
-    if (this._$editorInputElm && this._$editorInputElm.remove) {
+    if (this.flatInstance && typeof this.flatInstance.destroy === 'function') {
+      this.flatInstance.destroy();
+      if (this.flatInstance.element) {
+        setTimeout(() => destroyObjectDomElementProps(this.flatInstance));
+      }
+      this.flatInstance = null;
+    }
+    if (this._$editorInputElm) {
       this._$editorInputElm.remove();
       this._$editorInputElm = null;
     }
-    if (this._$inputWithData && typeof this._$inputWithData.remove === 'function') {
+    if (this._$inputWithData) {
       this._$inputWithData.remove();
       this._$inputWithData = null;
     }
-    if (this.flatInstance && typeof this.flatInstance.destroy === 'function') {
-      this.flatInstance.destroy();
-      this.flatInstance = null;
-    }
+    this._$input.remove();
   }
 
   focus() {

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

@@ -19,7 +19,7 @@ import {
   SearchTerm,
 } from './../models/index';
 import { buildSelectOperatorHtmlString } from './filterUtilities';
-import { getTranslationPrefix, mapFlatpickrDateFormatWithFieldType, mapOperatorToShorthandDesignation } from '../services/utilities';
+import { destroyObjectDomElementProps, getTranslationPrefix, mapFlatpickrDateFormatWithFieldType, mapOperatorToShorthandDesignation } from '../services/utilities';
 
 // use Flatpickr from import or 'require', whichever works first
 declare function require(name: string): any;
@@ -133,13 +133,19 @@ export class CompoundDateFilter implements Filter {
    * destroy the filter
    */
   destroy() {
+    if (this.flatInstance && typeof this.flatInstance.destroy === 'function') {
+      this.flatInstance.destroy();
+      if (this.flatInstance.element) {
+        destroyObjectDomElementProps(this.flatInstance);
+      }
+      this.flatInstance = null;
+    }
     if (this.$filterElm) {
       this.$filterElm.off('keyup').remove();
       this.$filterElm = null;
     }
-    if (this.flatInstance && typeof this.flatInstance.destroy === 'function') {
-      this.flatInstance.destroy();
-      this.flatInstance = null;
+    if (this.$selectOperatorElm) {
+      this.$selectOperatorElm.off('change').remove();
     }
   }
 

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

@@ -1,6 +1,6 @@
 import { Optional } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { mapFlatpickrDateFormatWithFieldType, mapMomentDateFormatWithFieldType } from '../services/utilities';
+import { destroyObjectDomElementProps, mapFlatpickrDateFormatWithFieldType, mapMomentDateFormatWithFieldType } from '../services/utilities';
 import {
   Column,
   ColumnFilter,
@@ -119,14 +119,17 @@ export class DateRangeFilter implements Filter {
    * destroy the filter
    */
   destroy() {
-    if (this.$filterElm) {
-      this.$filterElm.off('keyup').remove();
-      this.$filterElm = null;
-    }
     if (this.flatInstance && typeof this.flatInstance.destroy === 'function') {
       this.flatInstance.destroy();
+      if (this.flatInstance.element) {
+        destroyObjectDomElementProps(this.flatInstance);
+      }
       this.flatInstance = null;
     }
+    if (this.$filterElm) {
+      this.$filterElm.off('keyup').remove();
+      this.$filterElm = null;
+    }
   }
 
   hide() {

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

@@ -72,7 +72,9 @@ export class ExtensionService {
         }
       }
     }
-    this._extensionList = null;
+    for (const key of Object.keys(this._extensionList)) {
+      delete this._extensionList[key];
+    }
   }
 
   /** Get all columns (includes visible and non-visible) */

src/app/modules/angular-slickgrid/services/utilities.ts

@@ -411,6 +411,24 @@ export function decimalFormatted(input: number | string, minDecimal?: number, ma
   return output;
 }
 
+/**
+ * Loop through all properties of an object and nullify any properties that are instanceof HTMLElement,
+ * if we detect an array then use recursion to go inside it and apply same logic
+ * @param obj - object containing 1 or more properties with DOM Elements
+ */
+export function destroyObjectDomElementProps(obj: any) {
+  if (obj) {
+    for (const key of Object.keys(obj)) {
+      if (Array.isArray(obj[key])) {
+        destroyObjectDomElementProps(obj[key]);
+      }
+      if (obj[key] instanceof HTMLElement) {
+        obj[key] = null;
+      }
+    }
+  }
+}
+
 /**
  * Format a number following options passed as arguments (decimals, separator, ...)
  * @param input