diff --git a/packages/grid/src/vaadin-grid-scroll-mixin.js b/packages/grid/src/vaadin-grid-scroll-mixin.js index d3e9b9a4f3..385edad647 100644 --- a/packages/grid/src/vaadin-grid-scroll-mixin.js +++ b/packages/grid/src/vaadin-grid-scroll-mixin.js @@ -235,17 +235,11 @@ export const ScrollMixin = (superClass) => /** @private */ __updateColumnsBodyContentHidden() { - if (!this._columnTree) { + if (!this._columnTree || !this._areSizerCellsAssigned()) { return; } const columnsInOrder = this._getColumnsInOrder(); - - // Return if sizer cells are not yet assigned to columns - if (!columnsInOrder[0] || !columnsInOrder[0]._sizerCell) { - return; - } - let bodyContentHiddenChanged = false; // Remove the column cells from the DOM if the column is outside the viewport. @@ -485,7 +479,7 @@ export const ScrollMixin = (superClass) => let transformFrozenToEndBody = transformFrozenToEnd; - if (this._lazyColumns) { + if (this._lazyColumns && this._areSizerCellsAssigned()) { // Lazy column rendering is used, calculate the offset to apply to the frozen to end cells const columnsInOrder = this._getColumnsInOrder(); @@ -515,4 +509,9 @@ export const ScrollMixin = (superClass) => this.$.table.style.setProperty('--_grid-horizontal-scroll-position', `${-x}px`); } } + + /** @private */ + _areSizerCellsAssigned() { + return this._getColumnsInOrder().every((column) => column._sizerCell); + } }; diff --git a/packages/grid/test/column-rendering.common.js b/packages/grid/test/column-rendering.common.js index 77e09d92ab..4b3606246f 100644 --- a/packages/grid/test/column-rendering.common.js +++ b/packages/grid/test/column-rendering.common.js @@ -215,6 +215,23 @@ import { flushGrid, getCellContent, getHeaderCellContent, onceResized } from './ expect(secondRect.top).to.equal(firstRect.bottom + detailsHeight); }); + it('should render new appended column', async () => { + grid = fixtureSync(` + + + + `); + grid.items = [{ name: `Item 1` }]; + await onceResized(grid); + flushGrid(grid); + + const newColumn = document.createElement('vaadin-grid-column'); + grid.appendChild(newColumn); + await nextFrame(); + + expect(isColumnInViewport(newColumn)).to.be.true; + }); + describe(`scroll horizontally - ${dir}`, () => { /** * Expect the cells DOM order to match the column order