fix: adjust virtualizer indexes when scrolling at the end (#9142) (#9516)

* fix: adjust virtualizer indexes when scrolling at the end

* fix: do not get reusables when there are no physical items

* fix: fix jumpy scrolling at virtualizer end

* refactor: do not modify delta

* refactor: revert changes in original path

* refactor: move line back

* test: add grid container resize test and modify an existing test

* refactor: move the fix to resize handler and simplify index adjustment

* refactor: update scroll top in order to have smooth scrolling

Co-authored-by: Ugur Saglam <106508695+ugur-vaadin@users.noreply.github.com>

Author: vaadin-bot

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

@@ -438,6 +438,24 @@ export class IronListAdapter {
     }
   }
 
+  /** @override */
+  _resizeHandler() {
+    super._resizeHandler();
+
+    // Fixes an issue where the new items are not created on scroll target resize when the scroll position is around the end.
+    // See https://github.com/vaadin/flow-components/issues/7307
+    const lastIndexVisible = this.adjustedLastVisibleIndex === this.size - 1;
+    const emptySpace = this._physicalTop - this._scrollPosition;
+    if (lastIndexVisible && emptySpace > 0) {
+      const idxAdjustment = Math.ceil(emptySpace / this._physicalAverage);
+      this._virtualStart = Math.max(0, this._virtualStart - idxAdjustment);
+      this._physicalStart = Math.max(0, this._physicalStart - idxAdjustment);
+      // Scroll to end for smoother resize
+      super.scrollToIndex(this._virtualCount - 1);
+      this.scrollTarget.scrollTop = this.scrollTarget.scrollHeight - this.scrollTarget.clientHeight;
+    }
+  }
+
   /**
    * Work around an iron-list issue with invalid item positioning.
    * See https://github.com/vaadin/flow-components/issues/4306

packages/grid/test/resizing.test.js

@@ -130,6 +130,39 @@ describe('resizing', () => {
     expect(grid.$.scroller.getBoundingClientRect().bottom).to.equal(grid.$.table.getBoundingClientRect().bottom);
   });
 
+  it('should create rows when resized while scrolled to bottom', async () => {
+    // Have a full width grid inside a fixed width container
+    component = fixtureSync(`
+    <div style="height: 200px;">
+      <vaadin-grid style="height: 100%;">
+        <vaadin-grid-column></vaadin-grid-column>
+      </vaadin-grid>
+    </div>
+    `);
+    grid = component.querySelector('vaadin-grid');
+    grid.querySelector('vaadin-grid-column').renderer = (root, _, model) => {
+      root.textContent = model.item.name;
+    };
+    const itemCount = 1000;
+    grid.items = Array.from({ length: itemCount }, (_, i) => ({
+      name: `Item ${i}`,
+    }));
+    // Scroll to end
+    grid.scrollToIndex(itemCount - 1);
+    await aTimeout(200);
+    // Resize container
+    for (let i = 0; i < 10; i++) {
+      component.style.height = `${component.offsetHeight + 200}px`;
+      flushGrid(grid);
+      await aTimeout(50);
+    }
+    const gridRect = grid.getBoundingClientRect();
+    // Get an element from the area where new rows should be created
+    const elementInResizedArea = document.elementFromPoint(gridRect.left + 1, gridRect.top + 50);
+    const isCell = elementInResizedArea && elementInResizedArea.tagName === 'VAADIN-GRID-CELL-CONTENT';
+    expect(isCell).to.be.true;
+  });
+
   describe('flexbox parent', () => {
     beforeEach(() => {
       grid.style.height = grid.style.width = '';