From 6657c1dadfb92c8351ca20d55b1c8746b185c7f7 Mon Sep 17 00:00:00 2001
From: babich-a <alexey.babych@gmail.com>
Date: Thu, 30 Apr 2020 09:54:16 +0300
Subject: [PATCH 1/2] attachGroupHeaderInkRippleEvents subscribed once

---
 js/ui/list/ui.list.base.js                    | 25 +++++++++++++------
 .../listParts/commonTests.js                  | 21 ++++++++++++++++
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/js/ui/list/ui.list.base.js b/js/ui/list/ui.list.base.js
index 6ec64666c39d..9abdd619ab06 100644
--- a/js/ui/list/ui.list.base.js
+++ b/js/ui/list/ui.list.base.js
@@ -720,18 +720,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 dxhoverend', 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
index f70432b45cf0..643b6cf91462 100644
--- a/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js
+++ b/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js
@@ -688,6 +688,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, () => {

From 555e5033ea0148eb10d7c9d04ccc984b7c93bb7f Mon Sep 17 00:00:00 2001
From: babich-a <alexey.babych@gmail.com>
Date: Thu, 30 Apr 2020 12:19:28 +0300
Subject: [PATCH 2/2] change event name

---
 js/ui/list/ui.list.base.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/ui/list/ui.list.base.js b/js/ui/list/ui.list.base.js
index 9abdd619ab06..0d5d639a8cfe 100644
--- a/js/ui/list/ui.list.base.js
+++ b/js/ui/list/ui.list.base.js
@@ -736,7 +736,7 @@ const ListBase = CollectionWidget.inherit({
         this._upInkRippleHandler = this._upInkRippleHandler || this.upInkRippleHandler.bind(this);
 
         const downArguments = [$element, 'dxpointerdown', selector, this._downInkRippleHandler];
-        const upArguments = [$element, 'dxpointerup dxhoverend', selector, this._upInkRippleHandler];
+        const upArguments = [$element, 'dxpointerup dxpointerout', selector, this._upInkRippleHandler];
 
         eventsEngine.off(...downArguments);
         eventsEngine.on(...downArguments);