Skip to content

Cannot read properties of null (reading 'parentElement') in Virtualize interop #65139

@rogihee

Description

@rogihee

Is there an existing issue for this?

  • I have searched the existing issues

Describe the bug

On of our components uses a Virtualize component to wrap a list of items that are shown in a dropdown scenario (autocomplete).

The stack trace is:

at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__23`1[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=10.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext() at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime , String , Object[] ) at Microsoft.AspNetCore.Components.Web.Virtualization.VirtualizeJsInterop.InitializeAsync(ElementReference spacerBefore, ElementReference spacerAfter) at Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize`1.<OnAfterRenderAsync>d__65[[<our item>].MoveNext() at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task , ComponentState )

The source seems to be the JS init of Virtualize called in OnAfterRender:

function init(dotNetHelper: DotNet.DotNetObject, spacerBefore: HTMLElement, spacerAfter: HTMLElement, rootMargin = 50): void {
  // Overflow anchoring can cause an ongoing scroll loop, because when we resize the spacers, the browser
  // would update the scroll position to compensate. Then the spacer would remain visible and we'd keep on
  // trying to resize it.
  const scrollContainer = findClosestScrollContainer(spacerBefore);
  (scrollContainer || document.documentElement).style.overflowAnchor = 'none';

  const rangeBetweenSpacers = document.createRange();

  if (isValidTableElement(spacerAfter.parentElement)) {
    spacerBefore.style.display = 'table-row';
    spacerAfter.style.display = 'table-row';
  }

  const intersectionObserver = new IntersectionObserver(intersectionCallback, {
    root: scrollContainer,
    rootMargin: `${rootMargin}px`,
  });
...

So it appears the spacerAfter.parentElement is the culprit. This is very difficult to reproduce, sorry.

Expected Behavior

No response

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

10.0.0

Anything else?

No response

Metadata

Metadata

Labels

area-blazorIncludes: Blazor, Razor ComponentsbugThis issue describes a behavior which is not expected - a bug.

Type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions