Correct Virtualize measurement ownership edge cases

Co-authored-by: PureWeen <5375137+PureWeen@users.noreply.github.com>

Author: Copilot

src/Components/Web.JS/src/Virtualize.ts

@@ -694,9 +694,7 @@ function init(dotNetHelper: DotNet.DotNetObject, spacerBefore: HTMLElement, spac
       const targetRect = target.getBoundingClientRect();
       const targetIntersectionTop = Math.max(targetRect.top, intersectionTop);
       const targetIntersectionBottom = Math.min(targetRect.bottom, intersectionBottom);
-      const isZeroHeightIntersection = targetRect.height === 0 && targetIntersectionBottom === targetIntersectionTop;
-      if (targetIntersectionBottom < targetIntersectionTop
-        || (targetIntersectionBottom === targetIntersectionTop && !isZeroHeightIntersection)) {
+      if (targetIntersectionBottom < targetIntersectionTop) {
         continue;
       }
 
@@ -791,6 +789,7 @@ function init(dotNetHelper: DotNet.DotNetObject, spacerBefore: HTMLElement, spac
     restoreAnchor: restoreAnchorForShift,
     alignToItem: alignToItemAt,
     beginProgrammaticScroll: beginProgrammaticScroll,
+    reobserveSpacers,
     anchorSnapshot: null as { anchorItemIndex: number; anchorOffset: number; scrollTop: number } | null,
     onDispose: () => {
       mutationObserver.disconnect();
@@ -989,14 +988,19 @@ function init(dotNetHelper: DotNet.DotNetObject, spacerBefore: HTMLElement, spac
       }
 
       const methodName = isBefore ? 'OnSpacerBeforeVisible' : 'OnSpacerAfterVisible';
-      dotNetHelper.invokeMethodAsync(
+      const callback = dotNetHelper.invokeMethodAsync(
         methodName,
         measurement.spacerSize,
         measurement.spacerSeparation,
         measurement.containerSize,
         reason,
         measurement.renderedWindowVersion
       );
+      void Promise.resolve(callback).then(isCurrentMeasurement => {
+        if (isCurrentMeasurement === false) {
+          reobserveSpacers();
+        }
+      });
     });
 
     if (source === ScrollSource.AlignToItem) {

src/Components/Web.JS/test/Virtualize.test.ts

@@ -17,10 +17,15 @@ describe('Virtualize exports', () => {
 describe('Virtualize intersection measurements', () => {
   let intersectionCallback: IntersectionObserverCallback;
   let spacerSeparation: number;
+  let observe: jest.Mock;
+  let unobserve: jest.Mock;
 
   beforeEach(() => {
     document.body.innerHTML = '';
     spacerSeparation = 600;
+    observe = jest.fn();
+    unobserve = jest.fn();
+    invokeMethodAsync.mockReset().mockResolvedValue(true);
 
     Object.defineProperty(globalThis, 'CSS', {
       configurable: true,
@@ -33,8 +38,8 @@ describe('Virtualize intersection measurements', () => {
           intersectionCallback = callback;
         }
 
-        observe() {}
-        unobserve() {}
+        observe(target: Element) { observe(target); }
+        unobserve(target: Element) { unobserve(target); }
         disconnect() {}
       },
     });
@@ -60,7 +65,7 @@ describe('Virtualize intersection measurements', () => {
     jest.restoreAllMocks();
   });
 
-  const invokeMethodAsync = jest.fn();
+  const invokeMethodAsync = jest.fn<(...args: unknown[]) => Promise<boolean>>();
   const dotNetHelper = {
     _callDispatcher: {},
     _id: 1,
@@ -254,6 +259,82 @@ describe('Virtualize intersection measurements', () => {
       2,
       2);
   });
+
+  test.each([
+    ['edge-adjacent nonzero spacer', -60, 10, true],
+    ['separated spacer', -61, 10, false],
+    ['edge-adjacent zero-height spacer', -50, 0, true],
+    ['overlapping spacer', -59, 10, true],
+  ])('matches threshold-zero intersection semantics for %s', (_, top, height, expectedCallback) => {
+    const container = document.createElement('div');
+    container.style.overflowY = 'auto';
+    const spacerBefore = document.createElement('div');
+    const item = document.createElement('div');
+    const spacerAfter = document.createElement('div');
+    spacerBefore.style.overflowY = 'visible';
+    container.append(spacerBefore, item, spacerAfter);
+    document.body.append(container);
+
+    setElementMetrics(container, rect(0, 200), 200);
+    setElementMetrics(spacerBefore, rect(top, height), height);
+    setElementMetrics(item, rect(20, 50), 50);
+    setElementMetrics(spacerAfter, rect(1000, 100), 100);
+    spacerBefore.setAttribute(renderedWindowVersionAttribute, '1');
+    spacerAfter.setAttribute(renderedWindowVersionAttribute, '1');
+
+    invokeMethodAsync.mockClear();
+    Virtualize.init(dotNetHelper, spacerBefore, spacerAfter);
+    intersectionCallback([{
+      target: spacerBefore,
+      isIntersecting: expectedCallback,
+    } as unknown as IntersectionObserverEntry], {} as IntersectionObserver);
+
+    expect(invokeMethodAsync).toHaveBeenCalledTimes(expectedCallback ? 1 : 0);
+  });
+
+  test('reobserves spacers only when managed code rejects a stale measurement', async () => {
+    jest.useFakeTimers();
+    const container = document.createElement('div');
+    container.style.overflowY = 'auto';
+    const spacerBefore = document.createElement('div');
+    const item = document.createElement('div');
+    const spacerAfter = document.createElement('div');
+    spacerBefore.style.overflowY = 'visible';
+    container.append(spacerBefore, item, spacerAfter);
+    document.body.append(container);
+
+    setElementMetrics(container, rect(0, 200), 200);
+    setElementMetrics(spacerBefore, rect(-10, 20), 20);
+    setElementMetrics(item, rect(10, 50), 50);
+    setElementMetrics(spacerAfter, rect(1000, 100), 100);
+    spacerBefore.setAttribute(renderedWindowVersionAttribute, '1');
+    spacerAfter.setAttribute(renderedWindowVersionAttribute, '1');
+
+    invokeMethodAsync.mockReset().mockResolvedValueOnce(false);
+    Virtualize.init(dotNetHelper, spacerBefore, spacerAfter);
+    observe.mockClear();
+    unobserve.mockClear();
+
+    const entry = {
+      target: spacerBefore,
+      isIntersecting: true,
+    } as unknown as IntersectionObserverEntry;
+    intersectionCallback([entry], {} as IntersectionObserver);
+    await Promise.resolve();
+
+    expect(unobserve).toHaveBeenCalledTimes(2);
+    expect(observe).toHaveBeenCalledTimes(2);
+
+    jest.advanceTimersByTime(50);
+    observe.mockClear();
+    unobserve.mockClear();
+    invokeMethodAsync.mockResolvedValueOnce(true);
+    intersectionCallback([entry], {} as IntersectionObserver);
+    await Promise.resolve();
+
+    expect(unobserve).not.toHaveBeenCalled();
+    expect(observe).not.toHaveBeenCalled();
+  });
 });
 
 function rect(top: number, height: number): DOMRect {

src/Components/Web/src/Virtualization/IVirtualizeJsCallbacks.cs

@@ -5,7 +5,7 @@ namespace Microsoft.AspNetCore.Components.Web.Virtualization;
 
 internal interface IVirtualizeJsCallbacks
 {
-    void OnBeforeSpacerVisible(float spacerSize, float spacerSeparation, float containerSize, SpacerVisibilityReason reason, long renderedWindowVersion);
-    void OnAfterSpacerVisible(float spacerSize, float spacerSeparation, float containerSize, SpacerVisibilityReason reason, long renderedWindowVersion);
+    bool OnBeforeSpacerVisible(float spacerSize, float spacerSeparation, float containerSize, SpacerVisibilityReason reason, long renderedWindowVersion);
+    bool OnAfterSpacerVisible(float spacerSize, float spacerSeparation, float containerSize, SpacerVisibilityReason reason, long renderedWindowVersion);
     void OnAlignmentCompleted(VirtualizeAlignmentResult result);
 }

src/Components/Web/src/Virtualization/Virtualize.cs

@@ -44,6 +44,12 @@ public sealed class Virtualize<TItem> : ComponentBase, IVirtualizeJsCallbacks, I
 
     internal long _renderedWindowVersion;
 
+    private long _contentRevision;
+
+    private RenderedWindowIdentity? _lastRenderedWindowIdentity;
+
+    private TItem[]? _lastLoadedItemsSnapshot;
+
     internal float _itemSize;
 
     private float _lastSetItemSize;
@@ -546,7 +552,12 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
             throw oldRefreshException;
         }
 
-        var renderedWindowVersion = ++_renderedWindowVersion;
+        var renderedWindowIdentity = GetRenderedWindowIdentity();
+        if (renderedWindowIdentity != _lastRenderedWindowIdentity)
+        {
+            _renderedWindowVersion++;
+        }
+        var renderedWindowVersion = _renderedWindowVersion;
 
         builder.OpenElement(0, SpacerElement);
         builder.AddAttribute(1, "data-blazor-virtualize-reserved-height", GetSpacerHeightPx(_itemsBefore));
@@ -628,8 +639,26 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
         builder.AddElementReferenceCapture(14, elementReference => _spacerAfter = elementReference);
 
         builder.CloseElement();
+
+        _lastRenderedWindowIdentity = GetRenderedWindowIdentity();
     }
 
+    private RenderedWindowIdentity GetRenderedWindowIdentity()
+        => new(
+            _itemsBefore,
+            _visibleItemCapacity,
+            _unusedItemCapacity,
+            _itemCount,
+            _loadedItemsStartIndex,
+            _lastRenderedItemCount,
+            _lastRenderedPlaceholderCount,
+            _itemSize,
+            _totalMeasuredHeight,
+            _measuredItemCount,
+            _loading,
+            _contentRevision,
+            SpacerElement);
+
     private string GetSpacerHeightPx(int itemCount)
         => (itemCount * GetItemHeight()).ToString(CultureInfo.InvariantCulture);
 
@@ -647,39 +676,39 @@ private void CancelInFlightScrollForUserInteraction()
         }
     }
 
-    void IVirtualizeJsCallbacks.OnBeforeSpacerVisible(
+    bool IVirtualizeJsCallbacks.OnBeforeSpacerVisible(
         float spacerSize,
         float spacerSeparation,
         float containerSize,
         SpacerVisibilityReason reason,
         long renderedWindowVersion)
     {
-        if (renderedWindowVersion != _renderedWindowVersion)
-        {
-            return;
-        }
-
         if (_pendingAnchorRestore)
         {
-            return;
+            return true;
         }
         if (_initialIndex.Phase == InitialIndexPhase.None && InitialItemIndex > 0)
         {
-            return;
+            return true;
+        }
+        if (reason == SpacerVisibilityReason.UserScroll)
+        {
+            CancelInFlightScrollForUserInteraction();
+        }
+        if (renderedWindowVersion != _renderedWindowVersion)
+        {
+            return false;
         }
         switch (reason)
         {
             case SpacerVisibilityReason.ProgrammaticScroll:
-                return;
-            case SpacerVisibilityReason.UserScroll:
-                CancelInFlightScrollForUserInteraction();
-                break;
+                return true;
             case SpacerVisibilityReason.ViewportFill:
                 // A fill callback while our own scroll is in flight is a side effect of that scroll —
                 // acting on it would move the target.
                 if (_currentScrollCts is not null)
                 {
-                    return;
+                    return true;
                 }
                 break;
         }
@@ -692,7 +721,7 @@ void IVirtualizeJsCallbacks.OnBeforeSpacerVisible(
                 ViewportFillDirection.Before,
                 visibleItemCapacity,
                 unusedItemCapacity);
-            return;
+            return true;
         }
 
         // Slide window up by at least one if spacer is visible but position unchanged.
@@ -702,33 +731,33 @@ void IVirtualizeJsCallbacks.OnBeforeSpacerVisible(
         }
 
         UpdateItemDistribution(itemsBefore, visibleItemCapacity, unusedItemCapacity);
+        return true;
     }
 
-    void IVirtualizeJsCallbacks.OnAfterSpacerVisible(
+    bool IVirtualizeJsCallbacks.OnAfterSpacerVisible(
         float spacerSize,
         float spacerSeparation,
         float containerSize,
         SpacerVisibilityReason reason,
         long renderedWindowVersion)
     {
-        if (renderedWindowVersion != _renderedWindowVersion)
-        {
-            return;
-        }
-
         if (_pendingAnchorRestore || reason == SpacerVisibilityReason.ProgrammaticScroll)
         {
-            return;
+            return true;
         }
         if (reason == SpacerVisibilityReason.UserScroll)
         {
             CancelInFlightScrollForUserInteraction();
         }
-        else if (reason == SpacerVisibilityReason.ViewportFill && _currentScrollCts is not null)
+        if (renderedWindowVersion != _renderedWindowVersion)
+        {
+            return false;
+        }
+        if (reason == SpacerVisibilityReason.ViewportFill && _currentScrollCts is not null)
         {
             // Bottom-spacer fill while our own scroll is in flight: the window moved but scrollTop hasn't
             // landed, so acting on it would undo the target. The real fill runs once the scroll completes.
-            return;
+            return true;
         }
         var hadNewMeasurements = CalculateItemDistribution(spacerSize, spacerSeparation, containerSize, out var itemsAfter, out var visibleItemCapacity, out var unusedItemCapacity);
 
@@ -738,7 +767,7 @@ void IVirtualizeJsCallbacks.OnAfterSpacerVisible(
                 ViewportFillDirection.After,
                 visibleItemCapacity,
                 unusedItemCapacity);
-            return;
+            return true;
         }
 
         var itemsBefore = Math.Max(0, _itemCount - itemsAfter - visibleItemCapacity);
@@ -761,6 +790,7 @@ void IVirtualizeJsCallbacks.OnAfterSpacerVisible(
         }
 
         UpdateItemDistribution(itemsBefore, visibleItemCapacity, unusedItemCapacity);
+        return true;
     }
 
     void IVirtualizeJsCallbacks.OnAlignmentCompleted(VirtualizeAlignmentResult result)
@@ -1083,7 +1113,15 @@ private async ValueTask RefreshDataCoreAsync(bool renderOnSuccess, CancellationT
             }
 
             _itemCount = result.TotalItemCount;
-            _loadedItems = result.Items;
+            var loadedItems = result.Items.ToArray();
+            if (_itemsProvider != DefaultItemsProvider
+                || _lastLoadedItemsSnapshot is null
+                || !_lastLoadedItemsSnapshot.SequenceEqual(loadedItems))
+            {
+                _contentRevision++;
+            }
+            _lastLoadedItemsSnapshot = loadedItems;
+            _loadedItems = loadedItems;
             _loadedItemsStartIndex = _itemsBefore;
 
             // For DefaultItemsProvider, capture the first loaded item so we can detect
@@ -1106,6 +1144,7 @@ private async ValueTask RefreshDataCoreAsync(bool renderOnSuccess, CancellationT
                 StateHasChanged();
             }
         }
+
         catch (Exception e)
         {
             if (e is OperationCanceledException oce && oce.CancellationToken == cancellationToken)
@@ -1230,6 +1269,21 @@ public async ValueTask DisposeAsync()
         }
     }
 
+    private readonly record struct RenderedWindowIdentity(
+        int ItemsBefore,
+        int VisibleItemCapacity,
+        int UnusedItemCapacity,
+        int ItemCount,
+        int LoadedItemsStartIndex,
+        int LastRenderedItemCount,
+        int LastRenderedPlaceholderCount,
+        float ItemSize,
+        float TotalMeasuredHeight,
+        int MeasuredItemCount,
+        bool IsLoading,
+        long ContentRevision,
+        string SpacerElement);
+
     private enum InitialIndexPhase
     {
         None,