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

Author: anna-shakhova

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

@@ -419,7 +419,7 @@ export const ListBase = CollectionWidget.inherit({
   },
 
   _scrollHandler(e) {
-    this._scrollAction && this._scrollAction(e);
+    this._scrollAction?.(e);
   },
 
   _initTemplates() {
@@ -495,7 +495,7 @@ export const ListBase = CollectionWidget.inherit({
       });
     } else {
       clearTimeout(this._showLoadingIndicatorTimer);
-      this._scrollView && this._scrollView.finishLoading();
+      this._scrollView?.finishLoading();
     }
     if (!isLoading) {
       this._isDataSourceFirstLoadCompleted(false);
@@ -504,7 +504,7 @@ export const ListBase = CollectionWidget.inherit({
 
   _dataSourceChangedHandler() {
     if (!this._shouldAppendItems() && hasWindow()) {
-      this._scrollView && this._scrollView.scrollTo(0);
+      this._scrollView?.scrollTo(0);
     }
 
     this.callBase.apply(this, arguments);
@@ -623,21 +623,27 @@ export const ListBase = CollectionWidget.inherit({
   _collapseGroupHandler($group, toggle) {
     const deferred = Deferred();
 
-    if ($group.hasClass(LIST_GROUP_COLLAPSED_CLASS) === toggle) {
+    const collapsed = $group.hasClass(LIST_GROUP_COLLAPSED_CLASS);
+
+    if (collapsed === toggle) {
       return deferred.resolve();
     }
 
     const $groupBody = $group.children(`.${LIST_GROUP_BODY_CLASS}`);
-
     const startHeight = getOuterHeight($groupBody);
     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

@@ -296,6 +296,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);
+    });
+
     QUnit.test('group body should be not collapsed by click on header if collapsibleGroups is disabled', function(assert) {
         const $element = this.element.dxList({
             items: [{ key: 'a', items: ['0'] }],