fix: use Math.round to get correct scroller first index (#8278) (#8284)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · Dec 6, 2024 · e1a0e99 · e1a0e99
1 parent e7ca3ff
commit e1a0e99
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/packages/date-picker/src/vaadin-infinite-scroller.js b/packages/date-picker/src/vaadin-infinite-scroller.js
@@ -376,7 +376,11 @@ class InfiniteScroller extends PolymerElement {
 
   /** @private */
   _updateClones(viewPortOnly) {
-    this._firstIndex = ~~((this._buffers[0].translateY - this._initialScroll) / this.itemHeight) + this._initialIndex;
+    const itemCount = (this._buffers[0].translateY - this._initialScroll) / this.itemHeight;
+    if (isNaN(itemCount)) {
+      return;
+    }
+    this._firstIndex = Math.round(itemCount) + this._initialIndex;
 
     const scrollerRect = viewPortOnly ? this.$.scroller.getBoundingClientRect() : undefined;
     this._buffers.forEach((buffer, bufferIndex) => {

diff --git a/packages/date-picker/test/scroller.test.js b/packages/date-picker/test/scroller.test.js
@@ -118,3 +118,23 @@ describe('vaadin-infinite-scroller', () => {
     });
   });
 });
+
+describe('fractional item size', () => {
+  let scroller;
+
+  beforeEach(async () => {
+    scroller = fixtureSync(`
+      <vaadin-infinite-scroller buffer-size="80">
+        <template>
+          <div>[[index]]</div>
+        </template>
+      </vaadin-infinite-scroller>
+    `);
+    scroller.style.setProperty('--vaadin-infinite-scroller-item-height', '30.0001px');
+    await activateScroller(scroller);
+  });
+
+  it('should be at the position 0', () => {
+    expect(scroller.position).to.be.closeTo(0, 0.001);
+  });
+});