Accordion: allow validation messages to overflow in opened items (T1327641)

packages/devextreme/js/__internal/ui/accordion.ts

@@ -345,6 +345,9 @@ class Accordion extends CollectionWidgetLiveUpdate<AccordionProperties, Item, Co
       finalItemHeight = getOuterHeight($title);
     }
 
+    $item.css('overflow', '');
+    $item.children(`.${ACCORDION_ITEM_BODY_CLASS}`).css('overflow', '');
+
     return this._animateItem($item, startItemHeight, finalItemHeight, skipAnimation, !!itemHeight);
   }
 
@@ -385,6 +388,11 @@ class Accordion extends CollectionWidgetLiveUpdate<AccordionProperties, Item, Co
         $element.css('height', '');
       }
 
+      if ($element.hasClass(ACCORDION_ITEM_OPENED_CLASS)) {
+        $element.css('overflow', 'visible');
+        $element.children(`.${ACCORDION_ITEM_BODY_CLASS}`).css('overflow', 'visible');
+      }
+
       $element
         .not(`.${ACCORDION_ITEM_OPENED_CLASS}`)
         .addClass(ACCORDION_ITEM_CLOSED_CLASS);

packages/devextreme/testing/tests/DevExpress.ui.widgets/accordion.tests.js

@@ -1610,3 +1610,101 @@ QUnit.module('optionChanged', moduleSetup, () => {
     });
 });
 
+QUnit.module('item overflow behavior (T1327641)', moduleSetup, () => {
+    QUnit.test('opened item has overflow:visible', function(assert) {
+        this.$element.dxAccordion({
+            items: this.items,
+            selectedIndex: 0,
+        });
+
+        const $item = this.$element.find(`.${ACCORDION_ITEM_CLASS}`).eq(0);
+        const $body = $item.children(`.${ACCORDION_ITEM_BODY_CLASS}`);
+
+        assert.strictEqual($item.get(0).style.overflow, 'visible', 'item has overflow:visible');
+        assert.strictEqual($body.get(0).style.overflow, 'visible', 'item body has overflow:visible');
+    });
+
+    QUnit.test('closed item has no overflow:visible style', function(assert) {
+        this.$element.dxAccordion({
+            items: this.items,
+            selectedIndex: 0,
+        });
+
+        const $closedItem = this.$element.find(`.${ACCORDION_ITEM_CLASS}`).eq(1);
+
+        assert.strictEqual($closedItem.get(0).style.overflow, '', 'closed item has no inline overflow');
+    });
+
+    QUnit.test('only opened items get overflow:visible in multiple mode', function(assert) {
+        this.$element.dxAccordion({
+            items: this.items,
+            selectedIndex: 0,
+            multiple: true,
+            collapsible: true,
+        });
+
+        const $items = this.$element.find(`.${ACCORDION_ITEM_CLASS}`);
+
+        assert.strictEqual($items.eq(0).get(0).style.overflow, 'visible', 'opened item has overflow:visible');
+        assert.strictEqual($items.eq(1).get(0).style.overflow, '', 'closed item has no inline overflow');
+        assert.strictEqual($items.eq(2).get(0).style.overflow, '', 'closed item has no inline overflow');
+    });
+
+    QUnit.test('overflow resets when item starts closing', function(assert) {
+        const instance = this.$element.dxAccordion({
+            items: this.items,
+            selectedIndex: 0,
+            collapsible: true,
+        }).dxAccordion('instance');
+
+        const $item = this.$element.find(`.${ACCORDION_ITEM_CLASS}`).eq(0);
+
+        assert.strictEqual($item.get(0).style.overflow, 'visible', 'item has overflow:visible before closing');
+
+        instance.collapseItem(0);
+
+        assert.strictEqual($item.get(0).style.overflow, '', 'overflow reset when closing starts');
+    });
+
+    QUnit.test('overflow:visible is set after opening animation completes', function(assert) {
+        fx.off = false;
+
+        this.$element.dxAccordion({
+            items: this.items,
+            selectedIndex: -1,
+            collapsible: true,
+            animationDuration: 100,
+        });
+
+        const instance = this.$element.dxAccordion('instance');
+        const $item = this.$element.find(`.${ACCORDION_ITEM_CLASS}`).eq(0);
+
+        instance.expandItem(0);
+
+        const $body = $item.children(`.${ACCORDION_ITEM_BODY_CLASS}`);
+
+        assert.strictEqual($item.get(0).style.overflow, '', 'overflow is not yet visible during animation');
+
+        this.clock.tick(100);
+
+        assert.strictEqual($item.get(0).style.overflow, 'visible', 'item has overflow:visible after animation');
+        assert.strictEqual($body.get(0).style.overflow, 'visible', 'item body has overflow:visible after animation');
+    });
+
+    QUnit.test('overflow:visible is restored when item is re-opened after closing', function(assert) {
+        const instance = this.$element.dxAccordion({
+            items: this.items,
+            selectedIndex: 0,
+            collapsible: true,
+        }).dxAccordion('instance');
+
+        instance.collapseItem(0);
+
+        const $item = this.$element.find(`.${ACCORDION_ITEM_CLASS}`).eq(0);
+        assert.strictEqual($item.get(0).style.overflow, '', 'overflow is reset after close');
+
+        instance.expandItem(0);
+        assert.strictEqual($item.get(0).style.overflow, 'visible', 'overflow:visible restored after re-open');
+    });
+});
+