fix: prevent unnecessary page fetches when scrolling to index

Author: sissbruecker

src/vaadin-grid-scroller.html

@@ -82,7 +82,13 @@
         this._scrollingToIndex = true;
         index = Math.min(Math.max(index, 0), this._effectiveSize - 1);
         this.$.table.scrollTop = index / this._effectiveSize * (this.$.table.scrollHeight - this.$.table.offsetHeight);
+
+        // We need to run the iron-list scroll handler here in order to recalculate the scaling from effective size to
+        // virtual size after changing the scroll position. However we don't want to trigger updates to the items / rows
+        // in this step, which could result in data provider requests for the previous viewport
+        this._preventItemUpdates = true;
         this._scrollHandler();
+        this._preventItemUpdates = false;
 
         if (this._accessIronListAPI(() => this._maxScrollTop) && this._virtualCount < this._effectiveSize) {
           this._adjustVirtualIndexOffset(1000000);
@@ -259,6 +265,10 @@
        * @protected
        */
       _assignModels(itemSet) {
+        // Skip here if internal flag for preventing item updates is set
+        if (this._preventItemUpdates) {
+          return;
+        }
         this._iterateItems((pidx, vidx) => {
           const el = this._physicalItems[pidx];
           this._toggleAttribute('hidden', vidx >= this._effectiveSize, el);

test/scroll-to-index.html

@@ -206,6 +206,24 @@
           };
         });
 
+        it('should not request to load page for previous viewport when clearing items from cache', () => {
+          grid.dataProvider = sinon.spy(infiniteDataProvider);
+          // Clear initial data provider request from spy
+          grid.dataProvider.reset();
+          // Remove item from current viewport from cache
+          // This simulates Flow component behavior, which clears pages for the
+          // previous viewport after loading pages for the new viewport
+          delete grid._cache.items[0];
+
+          // Scroll to new viewport
+          grid.scrollToIndex(1000);
+
+          // Verify data provider was not called with page for previous viewport (page 0)
+          grid.dataProvider.args.forEach(args => {
+            expect(args[0].page).not.to.eql(0);
+          });
+        });
+
       });
 
       describe('Added item', () => {