fix: manual virtual index adjustments (#3843) (CP: 23.0) (#3848)

Co-authored-by: Tomi Virkki <tomivirkki@users.noreply.github.com> Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · May 13, 2022 · 4c72767 · 4c72767
1 parent 32ffd9d
commit 4c72767
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 2 deletions.
diff --git a/packages/component-base/src/virtualizer-iron-list-adapter.js b/packages/component-base/src/virtualizer-iron-list-adapter.js
@@ -298,6 +298,13 @@ export class IronListAdapter {
 
     super._scrollHandler();
 
+    if (this._physicalCount !== 0) {
+      // After running super._scrollHandler, fix _virtualStart to workaround an iron-list issue.
+      // See https://github.com/vaadin/web-components/issues/1691
+      const reusables = this._getReusables(true);
+      this._virtualStart += reusables.indexes.length;
+    }
+
     if (this.reorderElements) {
       this.__scrollReorderDebouncer = Debouncer.debounce(
         this.__scrollReorderDebouncer,

diff --git a/.../test/virtualizer-wheel-scrolling.test.js → ...t-base/test/virtualizer-scrolling.test.js b/.../test/virtualizer-wheel-scrolling.test.js → ...t-base/test/virtualizer-scrolling.test.js
@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
+import { fixtureSync, nextFrame, nextRender } from '@vaadin/testing-helpers';
 import Sinon from 'sinon';
 import { Virtualizer } from '../src/virtualizer.js';
 
@@ -11,7 +11,7 @@ function canScroll(el, deltaY) {
   return isScrollableElement && (canScrollAndScrollingDownwards || canScrollAndScrollingUpwards);
 }
 
-describe('scrolling mode', () => {
+describe('virtualizer - wheel scrolling', () => {
   const IGNORE_WHEEL_TIMEOUT = 500;
   let wrapper;
   let virtualizer;
@@ -192,3 +192,51 @@ describe('scrolling mode', () => {
     expect(wrapper.scrollTop).to.equal(0);
   });
 });
+
+describe('virtualizer - scrollbar scrolling', () => {
+  let virtualizer;
+  let scrollTarget;
+
+  beforeEach(() => {
+    scrollTarget = fixtureSync(`
+      <div style="height: 100px;">
+        <div></div>
+      </div>
+    `);
+    const scrollContainer = scrollTarget.firstElementChild;
+
+    virtualizer = new Virtualizer({
+      createElements: (count) => [...Array(count)].map(() => document.createElement('div')),
+      updateElement: (el, index) => {
+        el.textContent = `item ${index}`;
+        el.classList.add(`item`);
+      },
+      scrollTarget,
+      scrollContainer
+    });
+  });
+
+  it('should have an item at the bottom of the viewport after scrolling up', async () => {
+    virtualizer.size = 100000;
+
+    // Scroll to end
+    virtualizer.scrollToIndex(100000);
+    await nextFrame();
+
+    // Scroll upwards in 1000px steps
+    for (let i = 0; i < 10; i++) {
+      await nextFrame();
+      scrollTarget.scrollTop -= 1000;
+    }
+
+    // There should be an item at the bottom of the viewport
+    await nextFrame();
+    const listRect = scrollTarget.getBoundingClientRect();
+    const lastVisibleElement = scrollTarget.getRootNode().elementFromPoint(listRect.left, listRect.bottom - 1);
+    expect([...lastVisibleElement.classList]).to.contain('item');
+  });
+
+  it('should not throw on flush if size is not set', () => {
+    expect(() => virtualizer.flush()).not.to.throw(Error);
+  });
+});