List: fix animation on collapse group (T1282693) (DevExpress#29813)

Author: anna-shakhova

packages/devextreme/js/__internal/ui/list/m_list.base.ts

@@ -793,13 +793,17 @@ export class ListBase extends CollectionWidget<ListBaseProperties> {
 
     let endHeight = 0;
 
-    if (startHeight === 0) {
+    if (collapsed) {
       setHeight($groupBody, 'auto');
       endHeight = getOuterHeight($groupBody);
     }
 
     $group.toggleClass(LIST_GROUP_COLLAPSED_CLASS, toggle);
 
+    if (fx.isAnimating($groupBody)) {
+      fx.stop($groupBody, false);
+    }
+
     fx.animate($groupBody, {
       // @ts-expect-error
       type: 'custom',

packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js

@@ -361,6 +361,34 @@ QUnit.module('collapsible groups', moduleSetup, () => {
         assert.ok(!$group.hasClass(LIST_GROUP_COLLAPSED_CLASS), 'collapsed class is not present');
     });
 
+    QUnit.test('group body should be correctly collapsed on fast multiple clicks on header (T1282693)', function(assert) {
+        this.clock.restore();
+        const done = assert.async();
+
+        const $element = this.element.dxList({
+            items: [{ key: 'a', items: ['0'] }],
+            grouped: true,
+            collapsibleGroups: true
+        });
+
+        const $group = $element.find('.' + LIST_GROUP_CLASS);
+        const $groupBody = $group.find('.' + LIST_GROUP_BODY_CLASS);
+        const $groupHeader = $element.find('.' + LIST_GROUP_HEADER_CLASS);
+
+        const animationDuration = 200;
+
+        for(let i = 0; i < 11; i++) {
+            $groupHeader.trigger('dxclick');
+        }
+
+        setTimeout(() => {
+            assert.strictEqual($group.hasClass(LIST_GROUP_COLLAPSED_CLASS), true, 'collapsed class is present');
+            assert.strictEqual($groupBody.height(), 0, 'group items are hidden');
+
+            done();
+        }, 2 * animationDuration);
+    });
+
     const LIST_GROUP_HEADER_INDICATOR_CLASS = 'dx-list-group-header-indicator';
 
     QUnit.test('group header collapsed indicator element', function(assert) {