fix(template): adjust rendered range to value changes

hoebbelsB · hoebbelsB · commit a9df89a2e299 · 2024-02-28T22:29:37.000+01:00
the scroll strategies could run into an error when the new dataset was smaller than the currently rendered range
diff --git a/libs/template/experimental/virtual-scrolling/src/lib/scroll-strategies/autosize-virtual-scroll-strategy.ts b/libs/template/experimental/virtual-scrolling/src/lib/scroll-strategies/autosize-virtual-scroll-strategy.ts
@@ -209,7 +209,7 @@ export class AutoSizeVirtualScrollStrategy<
   }
 
   /** @internal */
-  private readonly _renderedRange$ = new ReplaySubject<ListRange>(1);
+  private readonly _renderedRange$ = new Subject<ListRange>();
   /** @internal */
   readonly renderedRange$ = this._renderedRange$.asObservable();
   /** @internal */
@@ -446,6 +446,23 @@ export class AutoSizeVirtualScrollStrategy<
           });
         }
         existingIds.clear();
+        if (dataLength < this._renderedRange.end) {
+          const rangeDiff = this._renderedRange.end - this._renderedRange.start;
+          const anchorDiff = this.anchorItem.index - this._renderedRange.start;
+          this._renderedRange.end = Math.min(
+            dataLength,
+            this._renderedRange.end
+          );
+          this._renderedRange.start = Math.max(
+            0,
+            this._renderedRange.end - rangeDiff
+          );
+          // this.anchorItem.offset = 0;
+          this.anchorItem.index = Math.max(
+            0,
+            this._renderedRange.start + anchorDiff
+          );
+        }
         this.contentLength = dataLength;
         this.contentSize = size;
       }),
diff --git a/libs/template/experimental/virtual-scrolling/src/lib/virtual-for.directive.ts b/libs/template/experimental/virtual-scrolling/src/lib/virtual-for.directive.ts
@@ -54,6 +54,7 @@ import {
   RxVirtualScrollStrategy,
   RxVirtualViewRepeater,
 } from './model';
+import { unpatchedMicroTask } from './util';
 import {
   createVirtualListTemplateManager,
   RxVirtualListTemplateManager,
@@ -62,6 +63,7 @@ import {
   DEFAULT_TEMPLATE_CACHE_SIZE,
   RX_VIRTUAL_SCROLL_DEFAULT_OPTIONS,
 } from './virtual-scroll.config';
+import { coalesceWith } from '@rx-angular/cdk/coalescing';
 
 /**
  * @description Will be provided through Terser global definitions by Angular CLI
@@ -640,6 +642,10 @@ export class RxVirtualFor<T, U extends NgIterable<T> = NgIterable<T>>
       this.scrollStrategy.renderedRange$,
       this.strategyHandler.strategy$.pipe(distinctUntilChanged()),
     ]).pipe(
+      // move calculation to next microtask so that
+      // scroll-strategies can adjust themselves before calculating
+      // the new views to display
+      coalesceWith(unpatchedMicroTask()),
       // map iterable to latest diff
       switchMap(([items, range, strategy]) => {
         const iterable = items.slice(range.start, range.end);
