diff --git a/packages/grid/src/vaadin-grid-mixin.js b/packages/grid/src/vaadin-grid-mixin.js index dedf0bc4f1..9d873f7302 100644 --- 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 index 7e3933f96c..7ed5ed1ea4 100644 --- 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 index 90ce1eb94a..77989b7930 100644 --- 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) => {