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 5236176b3..240bddcb7 100644 --- a/src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts +++ b/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 diff --git a/src/app/modules/angular-slickgrid/editors/dateEditor.ts b/src/app/modules/angular-slickgrid/editors/dateEditor.ts index 4e39c6fd2..c4b9febd6 100644 --- a/src/app/modules/angular-slickgrid/editors/dateEditor.ts +++ b/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() { diff --git a/src/app/modules/angular-slickgrid/filters/compoundDateFilter.ts b/src/app/modules/angular-slickgrid/filters/compoundDateFilter.ts index af3c7df7c..c61f41114 100644 --- a/src/app/modules/angular-slickgrid/filters/compoundDateFilter.ts +++ b/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(); } } diff --git a/src/app/modules/angular-slickgrid/filters/dateRangeFilter.ts b/src/app/modules/angular-slickgrid/filters/dateRangeFilter.ts index 564e56f2c..8ecb7034d 100644 --- a/src/app/modules/angular-slickgrid/filters/dateRangeFilter.ts +++ b/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() { diff --git a/src/app/modules/angular-slickgrid/services/extension.service.ts b/src/app/modules/angular-slickgrid/services/extension.service.ts index 899418708..ef42ab98c 100644 --- a/src/app/modules/angular-slickgrid/services/extension.service.ts +++ b/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) */ diff --git a/src/app/modules/angular-slickgrid/services/utilities.ts b/src/app/modules/angular-slickgrid/services/utilities.ts index 183e996f8..b89a96a84 100644 --- a/src/app/modules/angular-slickgrid/services/utilities.ts +++ b/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