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
6pac · Nov 14, 2020 · e3f4961 · e3f4961
1 parent 1b549b1
commit e3f4961
Show file tree

Hide file tree

Showing 14 changed files with 187 additions and 21 deletions.
diff --git 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
@@ -189,17 +189,15 @@
       // 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"/>');
       if (_options.gridMenu && _options.gridMenu.iconCssClass) {
         $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
@@ -22,7 +22,7 @@
       maxToolTipLength: null,
       replaceExisting: true
     };
-    
+
     /**
      * Initialize plugin.
      */
@@ -32,15 +32,15 @@
       if (options.enableForCells) _grid.onMouseEnter.subscribe(handleMouseEnter);
       if (options.enableForHeaderCells) _grid.onHeaderMouseEnter.subscribe(handleHeaderMouseEnter);
     }
-    
+
     /**
      * Destroy plugin.
      */
     function destroy() {
       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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,