PivotGrid: Fix sorting icon is positioned incorrectly when header tex…

…t was wrapped to the next line (T878428) (#12708)
DevExpress · Apr 15, 2020 · dcbb247 · dcbb247
1 parent 9c0637b
commit dcbb247
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/styles/widgets/common/pivotGrid.less b/styles/widgets/common/pivotGrid.less
@@ -179,6 +179,12 @@
 
             > span {
                 white-space: normal;
+            }
+        }
+
+        .dx-pivotgrid-collapsed,
+        .dx-pivotgrid-expanded {
+            > span {
                 display: inline-flex;
             }
         }

diff --git a/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.tests.js b/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.tests.js
@@ -4035,7 +4035,49 @@ QUnit.module('dxPivotGrid', {
         assert.strictEqual(textRect.left, expandIconRect.right, 'text is after expand icon');
     });
 
+    // T878428
+    QUnit.test('Sort icon should be correctly positioned when header text was wrapped to the next line', function(assert) {
+        const getHeaderElement = () => {
+            return $('#pivotGrid').find('.dx-pivotgrid-horizontal-headers td').eq(0);
+        };
+
+        // arrange
+        createPivotGrid({
+            dataSource: {
+                fields: [
+                    { dataField: 'city', area: 'row' },
+                    { dataField: 'price', area: 'data' },
+                    { dataField: 'country', area: 'column' }
+                ],
+                store: [{
+                    country: 'United Kingdom',
+                    city: 'London'
+                }]
+            },
+            allowSortingBySummary: true,
+            width: 200
+        }, assert);
+        this.clock.tick();
+
+        // act
+        getHeaderElement().trigger('dxcontextmenu');
+        $('.dx-context-menu.dx-pivotgrid').find('.dx-menu-item').eq(0).trigger('dxclick');
+        this.clock.tick();
+
+        // assert
+        const $header = getHeaderElement();
+        assert.ok($header.hasClass('dx-pivotgrid-sorted'));
+        assert.notEqual($header.find('span').css('display'), 'inline-flex', 'no inline-flex');
 
+        const $sortIcon = $header.find('.dx-icon-sorted');
+        const sortIconRect = $sortIcon.get(0).getBoundingClientRect();
+        const headerIconRect = $header.get(0).getBoundingClientRect();
+
+        assert.ok(sortIconRect.top > headerIconRect.top, 'top');
+        assert.ok(sortIconRect.bottom < headerIconRect.bottom, 'bottom');
+        assert.ok(sortIconRect.left > headerIconRect.left, 'left');
+        assert.ok(sortIconRect.right < headerIconRect.right, 'right');
+    });
 });
 
 QUnit.module('Field Panel', {