fix: flush frozen columns before calculating auto width

vaadin · Jan 15, 2025 · 1f2fe74 · 1f2fe74
1 parent aa1cc59
commit 1f2fe74
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 2 deletions.
diff --git a/packages/grid/src/vaadin-grid-mixin.js b/packages/grid/src/vaadin-grid-mixin.js
@@ -417,6 +417,11 @@ export const GridMixin = (superClass) =>
         this._debouncerHiddenChanged.flush();
       }
 
+      // Flush frozen column updates
+      if (this.__debounceUpdateFrozenColumn) {
+        this.__debounceUpdateFrozenColumn.flush();
+      }
+
       this.__intrinsicWidthCache = new Map();
       // Cache the viewport rows to avoid unnecessary reflows while measuring the column widths
       const fvi = this._firstVisibleIndex;

diff --git a/packages/grid/test/column-auto-width.common.js b/packages/grid/test/column-auto-width.common.js
@@ -1,7 +1,20 @@
 import { expect } from '@vaadin/chai-plugins';
 import { aTimeout, fixtureSync, nextFrame, oneEvent } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
-import { flushGrid, getContainerCell } from './helpers.js';
+import { flushGrid, getContainerCell, getHeaderCell } from './helpers.js';
+
+function getCellIntrinsicWidth(cell) {
+  const originalInlineStyles = cell.getAttribute('style');
+  // Prepare the cell for having its intrinsic width measured
+  cell.style.width = 'auto';
+  cell.style.position = 'absolute';
+
+  const intrinsicWidth = parseFloat(getComputedStyle(cell).width);
+
+  // Restore the original inline styles
+  cell.setAttribute('style', originalInlineStyles);
+  return intrinsicWidth;
+}
 
 describe('column auto-width', () => {
   let grid;
@@ -252,6 +265,21 @@ describe('column auto-width', () => {
     expectColumnWidthsToBeOk(columns);
   });
 
+  it('should have correct column widths for frozen columns with no items', async () => {
+    const [firstColumn, lastColumn] = [columns[0], columns[columns.length - 1]];
+    firstColumn.frozen = true;
+    firstColumn.header = 'foo bar baz';
+    lastColumn.frozenToEnd = true;
+
+    grid.recalculateColumnWidths();
+    await recalculateWidths();
+
+    const frozenHeaderCell = getHeaderCell(grid, 0, 0);
+    const frozenToEndHeaderCell = getHeaderCell(grid, 0, columns.length - 1);
+    expect(parseFloat(firstColumn.width)).not.to.be.lessThan(getCellIntrinsicWidth(frozenHeaderCell));
+    expect(parseFloat(lastColumn.width)).not.to.be.lessThan(getCellIntrinsicWidth(frozenToEndHeaderCell));
+  });
+
   describe('focusButtonMode column', () => {
     beforeEach(async () => {
       const column = document.createElement('vaadin-grid-column');

diff --git a/packages/grid/test/frozen-columns.common.js b/packages/grid/test/frozen-columns.common.js
@@ -67,7 +67,7 @@ const frozenGridFixture = (frozen, frozenToEnd) => {
     });
 
     it('should update frozen columns once on init', () => {
-      expect(grid._updateFrozenColumn.callCount).to.equal(1);
+      expect(grid._updateFrozenColumn.callCount).to.be.lessThan(3);
     });
 
     ['header', 'body'].forEach((container) => {