Fix dxList memory leak in material theme (T882408) (DevExpress#12907)

babich-a · Apr 30, 2020 · 6edd20f · 6edd20f
1 parent 996057c
commit 6edd20f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
diff --git a/js/ui/list/ui.list.base.js b/js/ui/list/ui.list.base.js
@@ -719,18 +719,29 @@ const ListBase = CollectionWidget.inherit({
         });
     },
 
+    downInkRippleHandler: function(e) {
+        this._toggleActiveState($(e.currentTarget), true, e);
+    },
+
+    upInkRippleHandler: function(e) {
+        this._toggleActiveState($(e.currentTarget), false);
+    },
+
     attachGroupHeaderInkRippleEvents: function() {
-        const that = this;
         const selector = '.' + LIST_GROUP_HEADER_CLASS;
         const $element = this.$element();
 
-        eventsEngine.on($element, 'dxpointerdown', selector, function(e) {
-            that._toggleActiveState($(e.currentTarget), true, e);
-        });
+        this._downInkRippleHandler = this._downInkRippleHandler || this.downInkRippleHandler.bind(this);
+        this._upInkRippleHandler = this._upInkRippleHandler || this.upInkRippleHandler.bind(this);
 
-        eventsEngine.on($element, 'dxpointerup dxhoverend', selector, function(e) {
-            that._toggleActiveState($(e.currentTarget), false);
-        });
+        const downArguments = [$element, 'dxpointerdown', selector, this._downInkRippleHandler];
+        const upArguments = [$element, 'dxpointerup dxpointerout', selector, this._upInkRippleHandler];
+
+        eventsEngine.off(...downArguments);
+        eventsEngine.on(...downArguments);
+
+        eventsEngine.off(...upArguments);
+        eventsEngine.on(...upArguments);
     },
 
     _createGroupRenderAction: function() {

diff --git a/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js b/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js
@@ -685,6 +685,27 @@ QUnit.module('collapsible groups', moduleSetup, () => {
             fx.off = false;
         }
     });
+
+    QUnit.test('attachGroupHeaderInkRippleEvents should remove previously attached events (T882408)', function(assert) {
+        const instance = this.element.dxList({
+            items: [{ key: 'a', items: ['0'] }],
+            grouped: true,
+            collapsibleGroups: true
+        }).dxList('instance');
+
+        sinon.spy(instance, 'downInkRippleHandler');
+
+        for(let i = 100; i > 0; i--) {
+            instance.attachGroupHeaderInkRippleEvents();
+        }
+
+        const groupHeaderElement = this.element.find('.' + LIST_GROUP_HEADER_CLASS);
+        groupHeaderElement.trigger('dxpointerdown');
+
+        assert.ok(instance.downInkRippleHandler.calledOnce);
+
+        instance.downInkRippleHandler.restore();
+    });
 });
 
 QUnit.module('next button', moduleSetup, () => {