@vaadin/component-base 24.4.0-alpha17 → 24.4.0-alpha18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/component-base",
-  "version": "24.4.0-alpha17",
+  "version": "24.4.0-alpha18",
   "publishConfig": {
     "access": "public"
   },
@@ -42,5 +42,5 @@
     "@vaadin/testing-helpers": "^0.6.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "eb6b4dac66be1c0ddc77757bed5f84a6d355e5cf"
+  "gitHead": "7d675c61eaa32ef50c07de7b2fea19ff437b6b90"
 }

package/src/define.js

@@ -9,7 +9,7 @@ export function defineCustomElement(CustomElement) {
   if (!defined) {
     Object.defineProperty(CustomElement, 'version', {
       get() {
-        return '24.4.0-alpha17';
+        return '24.4.0-alpha18';
       },
     });
 

package/src/virtualizer-iron-list-adapter.js

@@ -89,6 +89,10 @@ export class IronListAdapter {
     return this.lastVisibleIndex + this._vidxOffset;
   }
 
+  get _maxVirtualIndexOffset() {
+    return this.size - this._virtualCount;
+  }
+
   __hasPlaceholders() {
     return this.__getVisibleElements().some((el) => el.__virtualizerPlaceholder);
   }
@@ -113,7 +117,7 @@ export class IronListAdapter {
     let targetVirtualIndex = Math.floor((index / this.size) * this._virtualCount);
     if (this._virtualCount - targetVirtualIndex < visibleElementCount) {
       targetVirtualIndex = this._virtualCount - (this.size - index);
-      this._vidxOffset = this.size - this._virtualCount;
+      this._vidxOffset = this._maxVirtualIndexOffset;
     } else if (targetVirtualIndex < visibleElementCount) {
       if (index < OFFSET_ADJUST_MIN_THRESHOLD) {
         targetVirtualIndex = index;
@@ -300,24 +304,41 @@ export class IronListAdapter {
       this._debouncers._increasePoolIfNeeded.cancel();
     }
 
+    // Prevent element update while the scroll position is being restored
+    this.__preventElementUpdates = true;
+
+    // Record the scroll position before changing the size
+    let fvi; // First visible index
+    let fviOffsetBefore; // Scroll offset of the first visible index
+    if (size > 0) {
+      fvi = this.adjustedFirstVisibleIndex;
+      fviOffsetBefore = this.__getIndexScrollOffset(fvi);
+    }
+
     // Change the size
     this.__size = size;
 
-    if (!this._physicalItems) {
-      // Not initialized yet
-      this._itemsChanged({
-        path: 'items',
-      });
-      this.__preventElementUpdates = true;
-      flush();
-      this.__preventElementUpdates = false;
-    } else {
-      // Already initialized, just update _virtualCount
-      this._updateScrollerSize();
-      this._virtualCount = this.items.length;
-      this._render();
+    this._itemsChanged({
+      path: 'items',
+    });
+    flush();
+
+    // Try to restore the scroll position if the new size is larger than 0
+    if (size > 0) {
+      fvi = Math.min(fvi, size - 1);
+      // Note, calling scrollToIndex also updates the virtual index offset,
+      // causing the virtualizer to add more items when size is increased,
+      // and remove exceeding items when size is decreased.
+      this.scrollToIndex(fvi);
+
+      const fviOffsetAfter = this.__getIndexScrollOffset(fvi);
+      if (fviOffsetBefore !== undefined && fviOffsetAfter !== undefined) {
+        this._scrollTop += fviOffsetBefore - fviOffsetAfter;
+      }
     }
 
+    this.__preventElementUpdates = false;
+
     // When reducing size while invisible, iron-list does not update items, so
     // their hidden state is not updated and their __lastUpdatedIndex is not
     // reset. In that case force an update here.
@@ -329,8 +350,7 @@ export class IronListAdapter {
       requestAnimationFrame(() => this._resizeHandler());
     }
 
-    // Schedule and flush a resize handler. This will cause a
-    // re-render for the elements.
+    // Schedule and flush a resize handler
     this._resizeHandler();
     flush();
   }
@@ -769,6 +789,8 @@ export class IronListAdapter {
 
   /** @private */
   _adjustVirtualIndexOffset(delta) {
+    const maxOffset = this._maxVirtualIndexOffset;
+
     if (this._virtualCount >= this.size) {
       this._vidxOffset = 0;
     } else if (this.__skipNextVirtualIndexAdjust) {
@@ -776,8 +798,7 @@ export class IronListAdapter {
     } else if (Math.abs(delta) > 10000) {
       // Process a large scroll position change
       const scale = this._scrollTop / (this.scrollTarget.scrollHeight - this.scrollTarget.offsetHeight);
-      const offset = scale * this.size;
-      this._vidxOffset = Math.round(offset - scale * this._virtualCount);
+      this._vidxOffset = Math.round(scale * maxOffset);
     } else {
       // Make sure user can always swipe/wheel scroll to the start and end
       const oldOffset = this._vidxOffset;
@@ -796,7 +817,6 @@ export class IronListAdapter {
       }
 
       // Near end
-      const maxOffset = this.size - this._virtualCount;
       if (this._scrollTop >= this._maxScrollTop && this._maxScrollTop > 0) {
         this._vidxOffset = maxOffset;
         if (oldOffset !== this._vidxOffset) {