fix: render all rows on deep expand with all-rows-visible (#12146) (#12150)

Co-authored-by: Sergey Vinogradov <mr.vursen@gmail.com>

Author: vaadin-bot

packages/component-base/src/virtualizer-iron-list-adapter.js

@@ -22,6 +22,7 @@ export class IronListAdapter {
     reorderElements,
     elementsContainer,
     __disableHeightPlaceholder,
+    __alwaysUpdateScrollerSize,
   }) {
     this.isAttached = true;
     this._vidxOffset = 0;
@@ -37,6 +38,12 @@ export class IronListAdapter {
     // elements with a non-zero height. Not for public use.
     this.__disableHeightPlaceholder = __disableHeightPlaceholder ?? false;
 
+    // Internal option: a predicate that, when it returns true, makes the scroller
+    // height always be applied instead of amortized (see `_updateScrollerSize`).
+    // Used by components whose height tracks the content exactly (e.g. the grid's
+    // `allRowsVisible` mode). Not for public use.
+    this.__alwaysUpdateScrollerSize = __alwaysUpdateScrollerSize;
+
     // Iron-list uses this value to determine how many pages of elements to render
     this._maxPages = 1.3;
 
@@ -216,6 +223,11 @@ export class IronListAdapter {
     this.__afterElementsUpdated(updatedElements);
   }
 
+  /** @override */
+  _updateScrollerSize(forceUpdate) {
+    super._updateScrollerSize(forceUpdate || !!this.__alwaysUpdateScrollerSize?.());
+  }
+
   /**
    * Updates the height for a given set of items.
    *

packages/grid/src/vaadin-grid-mixin.js

@@ -247,6 +247,13 @@ export const GridMixin = (superClass) =>
         // otherwise be triggered by this logic because it reads the row height
         // right after updating the rows' content.
         __disableHeightPlaceholder: true,
+        // The virtualizer amortizes scroller height updates to avoid reflows while
+        // scrolling. In `allRowsVisible` mode the grid has no scrolling and its
+        // height must track the content exactly, so tell the virtualizer to always
+        // apply the scroller height. Otherwise the items container can be left at a
+        // stale, too-small height and clip rows when the grid grows (e.g. when
+        // expanding a tree grid from a small size).
+        __alwaysUpdateScrollerSize: () => this.allRowsVisible,
       });
 
       this._tooltipController = new TooltipController(this);

packages/grid/test/resizing.test.js

@@ -339,6 +339,7 @@ describe('all rows visible', () => {
         };
         cb([item], 1);
       };
+      flushGrid(grid);
     });
 
     it('should have all rows visible on deep expand', () => {
@@ -359,6 +360,9 @@ describe('all rows visible', () => {
     });
 
     it('should have all rows visible on deep expand with no header', () => {
+      const column = grid.querySelector('vaadin-grid-tree-column');
+      column.header = null;
+
       grid.expandedItems = [
         { value: '0' },
         { value: '0-0' },
@@ -370,9 +374,6 @@ describe('all rows visible', () => {
         { value: '0-0-0-0-0-0-0-0' },
       ];
 
-      const column = grid.querySelector('vaadin-grid-tree-column');
-      column.header = null;
-
       flushGrid(grid);
       expect(grid._firstVisibleIndex).to.equal(0);
       expect(grid._lastVisibleIndex).to.equal(8);