diff --git a/packages/grid/src/vaadin-grid-mixin.js b/packages/grid/src/vaadin-grid-mixin.js index 075a4043afd..00f642fbd57 100644 --- a/packages/grid/src/vaadin-grid-mixin.js +++ b/packages/grid/src/vaadin-grid-mixin.js @@ -661,11 +661,13 @@ export const GridMixin = (superClass) => cell.__parentRow = row; // Cache the cell reference row.__cells.push(cell); - if (!column._bodyContentHidden) { + + const isSizerRow = row === this.$.sizer; + if (!column._bodyContentHidden || isSizerRow) { row.appendChild(cell); } - if (row === this.$.sizer) { + if (isSizerRow) { column._sizerCell = cell; } diff --git a/packages/grid/test/column-rendering.test.js b/packages/grid/test/column-rendering.test.js index 538fcfa8fe7..7864fe1eff2 100644 --- a/packages/grid/test/column-rendering.test.js +++ b/packages/grid/test/column-rendering.test.js @@ -444,6 +444,32 @@ import { flushGrid, getCellContent, getHeaderCellContent, onceResized } from './ // Expect the cell that was previously not visible to have the last-row-cell part expect(getBodyCell(1, 0).getAttribute('part')).to.include('last-row-cell'); }); + + it('should have only one cell removed from sizer row after a column is hidden', async () => { + await scrollHorizontally(-100); + columns[4].hidden = true; + + await nextFrame(); + + const sizerCellsCount = grid.$.sizer.querySelectorAll('td').length; + expect(sizerCellsCount).to.equal(columns.length - 1); + }); + + it('should have the same amount of visible columns after a column is hidden', async () => { + let columnsInViewport = columns.filter((column) => !column.hidden && isColumnInViewport(column)); + const isCellsInViewportVisibleBefore = columnsInViewport.every( + (col) => !isBodyCellContentHidden(columns.indexOf(col)), + ); + columns[7].hidden = true; + await scrollHorizontally(-100); + await nextFrame(); + + columnsInViewport = columns.filter((column) => !column.hidden && isColumnInViewport(column)); + const isCellsOnViewportVisible = columnsInViewport.every( + (col) => !isBodyCellContentHidden(columns.indexOf(col)), + ); + expect(isCellsOnViewportVisible).to.equal(isCellsInViewportVisibleBefore); + }); }); describe(`keyboard navigation - ${dir}`, () => {