From e3f4961c8c8270ac6241a3644b9fad44d14ddc1f Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Fri, 13 Nov 2020 21:56:56 -0500
Subject: [PATCH] fix: unsubscribe everything event & nullify DOM elements
 avoid detach elements (#551)

* fix: nullify every DOM elements to avoid detach elements
- see this Stack Overflow [question](https://stackoverflow.com/questions/16901759/javascript-memory-leaks-detached-dom-tree) for reference

* refactor: nullify element in correct scope

* refactor: nullify every elements to avoid detached elements

* refactor: on destroy we should call selector destroy if exist

* refactor: remove event handler when destroying controls

* refactor: add flag to destroy all elements

* refactor: make sure all event listeners are unsubscribed

* refactor: fix code indentation
---
 controls/slick.columnpicker.js        | 15 +++++-
 controls/slick.gridmenu.js            | 30 ++++++++---
 plugins/slick.autotooltips.js         | 12 +++--
 plugins/slick.cellmenu.js             |  3 ++
 plugins/slick.cellrangedecorator.js   |  7 ++-
 plugins/slick.cellrangeselector.js    |  9 +++-
 plugins/slick.cellselectionmodel.js   |  4 ++
 plugins/slick.checkboxselectcolumn.js |  2 +-
 plugins/slick.contextmenu.js          |  3 ++
 plugins/slick.draggablegrouping.js    |  4 +-
 plugins/slick.headermenu.js           | 11 ++++
 slick.compositeeditor.js              |  6 ++-
 slick.dataview.js                     | 24 +++++++++
 slick.grid.js                         | 78 ++++++++++++++++++++++++++-
 14 files changed, 187 insertions(+), 21 deletions(-)

diff --git a/controls/slick.columnpicker.js b/controls/slick.columnpicker.js
index a34c3b72..2cba99fa 100644
--- a/controls/slick.columnpicker.js
+++ b/controls/slick.columnpicker.js
@@ -79,9 +79,18 @@
     function destroy() {
       _grid.onHeaderContextMenu.unsubscribe(handleHeaderContextMenu);
       _grid.onColumnsReordered.unsubscribe(updateColumnOrder);
+      if ($list) {
+        $list.remove();
+      }
+      if ($menu) {
+        $menu.off("click").remove();
+      }
       $(document.body).off("mousedown", handleBodyMouseDown);
-      $("div.slick-columnpicker").hide(_options && _options.columnPicker && _options.columnPicker.fadeSpeed);
-      $menu.remove();
+      $(".slick-columnpicker." + _gridUid).hide(_options && _options.columnPicker && _options.columnPicker.fadeSpeed);
+      $columnTitleElm = null;
+      $list = null;
+      $menu = null;
+      $(window).off("beforeunload");
     }
 
     function handleBodyMouseDown(e) {
@@ -151,6 +160,8 @@
         .fadeIn(_options && _options.columnPicker && _options.columnPicker.fadeSpeed);
 
       $list.appendTo($menu);
+      $li = null;
+      $input = null;
     }
 
     function updateColumnOrder() {
diff --git a/controls/slick.gridmenu.js b/controls/slick.gridmenu.js
index d887465b..ea7f3470 100644
--- a/controls/slick.gridmenu.js
+++ b/controls/slick.gridmenu.js
@@ -189,8 +189,7 @@
       // if header row is enabled, we need to resize it's width also
       var enableResizeHeaderRow = (_options.gridMenu && _options.gridMenu.resizeOnShowHeaderRow != undefined) ? _options.gridMenu.resizeOnShowHeaderRow : _defaults.resizeOnShowHeaderRow;
       if (enableResizeHeaderRow && _options.showHeaderRow) {
-        var $headerrow = $('.' + _gridUid + '.slick-headerrow');
-        $headerrow.attr('style', 'width: calc(100% - ' + gridMenuWidth + 'px)');
+        $('.' + _gridUid + '.slick-headerrow').attr('style', 'width: calc(100% - ' + gridMenuWidth + 'px)');
       }
 
       $button = $('<button class="slick-gridmenu-button"/>');
@@ -198,8 +197,7 @@
         $button.addClass(_options.gridMenu.iconCssClass);
       } else {
         var iconImage = (_options.gridMenu && _options.gridMenu.iconImage) ? _options.gridMenu.iconImage : "../images/drag-handle.png";
-        var $btnImage = $('<img src="' + iconImage + '"/>');
-        $btnImage.appendTo($button);
+        $('<img src="' + iconImage + '"/>').appendTo($button);
       }
       $button.insertBefore($header);
 
@@ -232,18 +230,34 @@
       _grid.onColumnsReordered.unsubscribe(updateColumnOrder);
       _grid.onBeforeDestroy.unsubscribe();
       _grid.onSetOptions.unsubscribe();
+      $("div.slick-gridmenu." + _gridUid).remove();
       deleteMenu();
+      $(window).off("beforeunload");
     }
 
     /** Delete the menu DOM element but without unsubscribing any events */
     function deleteMenu() {
       $(document.body).off("mousedown." + _gridUid, handleBodyMouseDown);
       $("div.slick-gridmenu." + _gridUid).hide();
-      $menu.remove();
-      $button.remove();
+      if ($button) {
+        $button.remove();
+      }
+      if ($menu) {
+        $menu.remove();
+      }
+      if ($customMenu) {
+        $customMenu.remove();
+      }
       if ($header) {
         $header.attr('style', 'width: 100%'); // put back original width
       }
+      $customTitleElm = null;
+      $columnTitleElm = null;
+      $customMenu = null;
+      $header = null;
+      $list = null;
+      $button = null;
+      $menu = null;
     }
 
     function populateCustomMenus(options, $customMenu) {
@@ -326,6 +340,9 @@
         if (item.textCssClass) {
           $text.addClass(item.textCssClass);
         }
+        $icon = null;
+        $li = null;
+        $text = null;
       }
     }
 
@@ -469,6 +486,7 @@
           return;
         }
       }
+      $input = null;
     }
 
     function handleBodyMouseDown(e) {
diff --git a/plugins/slick.autotooltips.js b/plugins/slick.autotooltips.js
index 7f279390..1700490a 100644
--- a/plugins/slick.autotooltips.js
+++ b/plugins/slick.autotooltips.js
@@ -22,7 +22,7 @@
       maxToolTipLength: null,
       replaceExisting: true
     };
-    
+
     /**
      * Initialize plugin.
      */
@@ -32,7 +32,7 @@
       if (options.enableForCells) _grid.onMouseEnter.subscribe(handleMouseEnter);
       if (options.enableForHeaderCells) _grid.onHeaderMouseEnter.subscribe(handleHeaderMouseEnter);
     }
-    
+
     /**
      * Destroy plugin.
      */
@@ -40,7 +40,7 @@
       if (options.enableForCells) _grid.onMouseEnter.unsubscribe(handleMouseEnter);
       if (options.enableForHeaderCells) _grid.onHeaderMouseEnter.unsubscribe(handleHeaderMouseEnter);
     }
-    
+
     /**
      * Handle mouse entering grid cell to add/remove tooltip.
      * @param {jQuery.Event} e - The event
@@ -61,9 +61,10 @@
           }
           $node.attr("title", text);
         }
+		    $node = null;
       }
     }
-    
+
     /**
      * Handle mouse entering header cell to add/remove tooltip.
      * @param {jQuery.Event} e     - The event
@@ -75,8 +76,9 @@
       if (column && !column.toolTip) {
         $node.attr("title", ($node.innerWidth() < $node[0].scrollWidth) ? column.name : "");
       }
+	    $node = null;
     }
-    
+
     // Public API
     $.extend(this, {
       "init": init,
diff --git a/plugins/slick.cellmenu.js b/plugins/slick.cellmenu.js
index 48e771cf..896b1e75 100644
--- a/plugins/slick.cellmenu.js
+++ b/plugins/slick.cellmenu.js
@@ -177,6 +177,9 @@
       if ($menu && $menu.remove) {
         $menu.remove();
       }
+      $commandTitleElm = null;
+      $optionTitleElm = null;
+      $menu = null;
     }
 
     function createMenu(e) {
diff --git a/plugins/slick.cellrangedecorator.js b/plugins/slick.cellrangedecorator.js
index a72baf18..1537b990 100644
--- a/plugins/slick.cellrangedecorator.js
+++ b/plugins/slick.cellrangedecorator.js
@@ -59,6 +59,10 @@
       return _elem;
     }
 
+    function destroy() {
+      hide();
+    }
+
     function hide() {
       if (_elem) {
         _elem.remove();
@@ -69,7 +73,8 @@
     $.extend(this, {
       "pluginName": "CellRangeDecorator",
       "show": show,
-      "hide": hide
+      "hide": hide,
+      "destroy": destroy
     });
   }
 })(jQuery);
diff --git a/plugins/slick.cellrangeselector.js b/plugins/slick.cellrangeselector.js
index 4472733f..b4057c0f 100644
--- a/plugins/slick.cellrangeselector.js
+++ b/plugins/slick.cellrangeselector.js
@@ -48,6 +48,11 @@
 
     function destroy() {
       _handler.unsubscribeAll();
+      _$activeCanvas = null;
+      _canvas = null;
+      if (_decorator && _decorator.destroy) {
+        _decorator.destroy();
+      }
     }
 
     function getCellDecorator() {
@@ -126,7 +131,7 @@
         e.pageY - _$activeCanvas.offset().top + _rowOffset
       );
 
-      // ... frozen column(s), 
+      // ... frozen column(s),
       if ( _gridOptions.frozenColumn >= 0 && (!_isRightCanvas && (end.cell > _gridOptions.frozenColumn)) || (_isRightCanvas && (end.cell <= _gridOptions.frozenColumn)) ) {
         return;
       }
@@ -164,7 +169,7 @@
         )
       });
     }
-    
+
     function getCurrentRange() {
       return _currentlySelectedRange;
     }
diff --git a/plugins/slick.cellselectionmodel.js b/plugins/slick.cellselectionmodel.js
index a9abfc24..8856fda6 100644
--- a/plugins/slick.cellselectionmodel.js
+++ b/plugins/slick.cellselectionmodel.js
@@ -45,6 +45,10 @@
       _selector.onCellRangeSelected.unsubscribe(handleCellRangeSelected);
       _selector.onBeforeCellRangeSelected.unsubscribe(handleBeforeCellRangeSelected);
       _grid.unregisterPlugin(_selector);
+      _canvas = null;
+      if (_selector && _selector.destroy) {
+        _selector.destroy();
+      }
     }
 
     function removeInvalidRanges(ranges) {
diff --git a/plugins/slick.checkboxselectcolumn.js b/plugins/slick.checkboxselectcolumn.js
index 39bc9902..9f4c49af 100644
--- a/plugins/slick.checkboxselectcolumn.js
+++ b/plugins/slick.checkboxselectcolumn.js
@@ -266,7 +266,7 @@
     }
 
     function addCheckboxToFilterHeaderRow(grid) {
-      grid.onHeaderRowCellRendered.subscribe(function (e, args) {
+      _handler.subscribe(grid.onHeaderRowCellRendered, function (e, args) {
         if (args.column.field === "sel") {
           $(args.node).empty();
           $("<span id='filter-checkbox-selectall-container'><input id='header-filter-selector" + _selectAll_UID + "' type='checkbox'><label for='header-filter-selector" + _selectAll_UID + "'></label></span>")
diff --git a/plugins/slick.contextmenu.js b/plugins/slick.contextmenu.js
index 3a2e360a..40660304 100644
--- a/plugins/slick.contextmenu.js
+++ b/plugins/slick.contextmenu.js
@@ -194,6 +194,9 @@
       if ($menu && $menu.remove) {
         $menu.remove();
       }
+      $commandTitleElm = null;
+      $optionTitleElm = null;
+      $menu = null;
     }
 
     function createMenu(e) {
diff --git a/plugins/slick.draggablegrouping.js b/plugins/slick.draggablegrouping.js
index c50986b3..dda41f00 100644
--- a/plugins/slick.draggablegrouping.js
+++ b/plugins/slick.draggablegrouping.js
@@ -56,6 +56,7 @@
     var _defaults = {
     };
     var onGroupChanged = new Slick.Event();
+    var _handler = new Slick.EventHandler();
 
     /**
      * Initialize plugin.
@@ -76,7 +77,7 @@
       setupColumnDropbox();
 
 
-      _grid.onHeaderCellRendered.subscribe(function (e, args) {
+      _handler.subscribe(_grid.onHeaderCellRendered, function (e, args) {
         var column = args.column;
         var node = args.node;
         if (!$.isEmptyObject(column.grouping)) {
@@ -143,6 +144,7 @@
      */
     function destroy() {
       onGroupChanged.unsubscribe();
+      _handler.unsubscribeAll();
     }
     
 
diff --git a/plugins/slick.headermenu.js b/plugins/slick.headermenu.js
index f9ecae8a..346cfc17 100644
--- a/plugins/slick.headermenu.js
+++ b/plugins/slick.headermenu.js
@@ -132,6 +132,12 @@
     function destroy() {
       _handler.unsubscribeAll();
       $(document.body).off("mousedown", handleBodyMouseDown);
+      if ($menu) {
+        $menu.remove();
+      }
+      $menu = null;
+      $activeHeaderColumn = null;
+      $menu = null;
     }
 
 
@@ -181,6 +187,7 @@
         $el
           .on("click", showMenu)
           .appendTo(args.node);
+		    $el = null;
       }
     }
 
@@ -283,6 +290,9 @@
         if (item.textCssClass) {
           $text.addClass(item.textCssClass);
         }
+        $icon = null;
+        $text = null;
+        $li = null;
       }
 
       var leftPos = $(this).offset().left;
@@ -313,6 +323,7 @@
       // Stop propagation so that it doesn't register as a header click event.
       e.preventDefault();
       e.stopPropagation();
+	    $menuButton = null;
     }
 
 
diff --git a/slick.compositeeditor.js b/slick.compositeeditor.js
index a12b0dbc..f3fe911f 100644
--- a/slick.compositeeditor.js
+++ b/slick.compositeeditor.js
@@ -111,6 +111,7 @@
         }
 
         options.destroy && options.destroy();
+		    editors = [];
       };
 
 
@@ -200,10 +201,13 @@
                 $labelElm.removeClass("invalid");
               }
             }
+            $validationElm = null;
+            $labelElm = null;
+            $editorElm = null;
           }
           idx++;
         }
-
+		    $targetElm = null;
 
         if (errors.length) {
           return {
diff --git a/slick.dataview.js b/slick.dataview.js
index 4cd2ba4a..5da39d90 100644
--- a/slick.dataview.js
+++ b/slick.dataview.js
@@ -49,6 +49,7 @@
     var compiledFilter;
     var compiledFilterWithCaching;
     var filterCache = [];
+    var _grid = null;
 
     // grouping
     var groupingInfoDefaults = {
@@ -99,6 +100,27 @@
       suspend = false;
       refresh();
     }
+	
+    function destroy() {
+      items = [];
+      idxById = null;
+      rowsById = null;
+      filter = null;
+      updated = null;
+      sortComparer = null;
+      filterCache = [];
+      filteredItems = [];
+      compiledFilter = null;
+      compiledFilterWithCaching = null;
+
+      if (_grid && _grid.onSelectedRowsChanged && _grid.onCellCssStylesChanged) {
+        _grid.onSelectedRowsChanged.unsubscribe();
+        _grid.onCellCssStylesChanged.unsubscribe();
+      }
+      if (self.onRowsOrCountChanged) {
+        self.onRowsOrCountChanged.unsubscribe();
+      }
+    }
 
     function setRefreshHints(hints) {
       refreshHints = hints;
@@ -1074,6 +1096,7 @@
      */
     function syncGridSelection(grid, preserveHidden, preserveHiddenOnSelectionChange) {
       var self = this;
+      _grid = grid;
       var inHandler;
       selectedRowIds = self.mapRowsToIds(grid.getSelectedRows());
       var onSelectedRowIdsChanged = new Slick.Event();
@@ -1187,6 +1210,7 @@
       // methods
       "beginUpdate": beginUpdate,
       "endUpdate": endUpdate,
+      "destroy": destroy,
       "setPagingOptions": setPagingOptions,
       "getPagingInfo": getPagingInfo,
       "getIdPropertyName": getIdPropertyName,
diff --git a/slick.grid.js b/slick.grid.js
index 6f3bed8b..52807097 100644
--- a/slick.grid.js
+++ b/slick.grid.js
@@ -2072,7 +2072,7 @@ if (typeof Slick === "undefined") {
       stylesheet = null;
     }
 
-    function destroy() {
+    function destroy(shouldDestroyAllElements) {
       getEditorLock().cancelCurrentEdit();
 
       trigger(self.onBeforeDestroy, {});
@@ -2092,6 +2092,78 @@ if (typeof Slick === "undefined") {
 
       $canvas.off("draginit dragstart dragend drag");
       $container.empty().removeClass(uid);
+      if (shouldDestroyAllElements) {
+        destroyAllElements();
+      }
+    }
+
+    function destroyAllElements() {
+      $activeCanvasNode = null;
+      $activeViewportNode = null;
+      $boundAncestors = null;
+      $canvas = null;
+      $canvasTopL = null;
+      $canvasTopR = null;
+      $canvasBottomL = null;
+      $canvasBottomR = null;
+      $container = null;
+      $focusSink = null;
+      $focusSink2 = null;
+      $groupHeaders = null;
+      $groupHeadersL = null;
+      $groupHeadersR = null;
+      $headerL = null;
+      $headerR = null;
+      $headers = null;
+      $headerRow = null;
+      $headerRowL = null;
+      $headerRowR = null;
+      $headerRowSpacerL = null;
+      $headerRowSpacerR = null;
+      $headerRowScrollContainer = null;
+      $headerRowScroller = null;
+      $headerRowScrollerL = null;
+      $headerRowScrollerR = null;
+      $headerScrollContainer = null;
+      $headerScroller = null;
+      $headerScrollerL = null;
+      $headerScrollerR = null;
+      $hiddenParents = null;
+      $footerRow = null;
+      $footerRowL = null;
+      $footerRowR = null;
+      $footerRowSpacerL = null;
+      $footerRowSpacerR = null;
+      $footerRowScroller = null;
+      $footerRowScrollerL = null;
+      $footerRowScrollerR = null;
+      $footerRowScrollContainer = null;
+      $preHeaderPanel = null;
+      $preHeaderPanelR = null;
+      $preHeaderPanelScroller = null;
+      $preHeaderPanelScrollerR = null;
+      $preHeaderPanelSpacer = null;
+      $preHeaderPanelSpacerR = null;
+      $topPanel = null;
+      $topPanelScroller = null;
+      $style = null;
+      $topPanelScrollerL = null;
+      $topPanelScrollerR = null;
+      $topPanelL = null;
+      $topPanelR = null;
+      $paneHeaderL = null;
+      $paneHeaderR = null;
+      $paneTopL = null;
+      $paneTopR = null;
+      $paneBottomL = null;
+      $paneBottomR = null;
+      $viewport = null;
+      $viewportTopL = null;
+      $viewportTopR = null;
+      $viewportBottomL = null;
+      $viewportBottomR = null;
+      $viewportScrollContainerX = null;
+      $viewportScrollContainerY = null;
     }
 
     //////////////////////////////////////////////////////////////////////////////////////////////
@@ -2416,6 +2488,7 @@ if (typeof Slick === "undefined") {
           len = $cellEl.outerWidth();
 
           $rowEl.remove();
+          $cellEl = null;
           return len;
         }
 
@@ -2437,6 +2510,7 @@ if (typeof Slick === "undefined") {
          });
 
         $rowEl.remove();
+        $cellEl = null;
         return max;
     }
 
@@ -5962,4 +6036,4 @@ if (typeof Slick === "undefined") {
 
     init();
   }
-}(jQuery));
+}(jQuery));
\ No newline at end of file