Skip to content

Conversation

@oroztocil
Copy link
Member

@oroztocil oroztocil commented Jan 23, 2026

Description

When a Virtualize component is rapidly shown/hidden (e.g., in an autocomplete dropdown), the JS interop call to initialize the virtualize observers may arrive after the component has been removed from the DOM. This causes a Cannot read properties of null (reading 'parentElement') error in the browser console.

Investigation Summary

The issue occurs in Virtualize.ts when:

  1. A Virtualize component mounts and calls Blazor._internal.Virtualize.init()
  2. Before the JS interop completes, the component is removed from the DOM
  3. The init() function receives null element references or references to disconnected elements
  4. Code then tries to access properties like parentElement on null/disconnected elements

Fix

This PR adds null/disconnected element checks at three points in Virtualize.ts:

  1. Early return in init(): If spacerBefore or spacerAfter are null, return immediately to avoid errors
  2. Mutation observer callback: Check spacer.isConnected before processing mutations
  3. Intersection observer callback: Check spacerBefore.isConnected and spacerAfter.isConnected before processing intersections

Fixes #65139

When a Virtualize component is rapidly shown/hidden (e.g., in an autocomplete
dropdown), the JS interop call to initialize the virtualize observers may arrive
after the component has been removed from the DOM. This causes a 'Cannot read
properties of null (reading parentElement)' error.

This fix adds null checks at three points in Virtualize.ts:
1. Early return in init() if spacerBefore or spacerAfter are null
2. Check spacer.isConnected in mutation observer callback
3. Check spacerBefore.isConnected and spacerAfter.isConnected in intersection callback

Fixes #65139
@github-actions github-actions bot added the area-blazor Includes: Blazor, Razor Components label Jan 23, 2026
@oroztocil oroztocil changed the title Fix null reference error in Virtualize component when rapidly toggled Fix null reference error in Virtualize component Jan 23, 2026
@oroztocil
Copy link
Member Author

This is a Copilot PR that directly prevents the null error reported in the issue. The question is if the spacer reference being null could indicate a deeper problem in logic of the Virtualize component or if it is really due to an otherwise harmless race condition.

@ilonatommy @dariatiurina @javiercn I'll appreciate your thoughts since you know the Virtualize component better.

@javiercn
Copy link
Member

The right thing to do here is to ask it to write a test or to do some validation in a deterministic way. Something like this:

"Before you attempt a fix. Write a sample that uses a mutation observer to keep track of the dom changes and logs information to the console. Modify init on virtualize so that it also prints to the console logs. Use some javascript to cause the virtualized list to appear and disappear quickly and then read the console logs to see what is happening"

@ilonatommy
Copy link
Member

The question is if the spacer reference being null could indicate a deeper problem in logic of the Virtualize component or if it is really due to an otherwise harmless race condition.

I think it is a natural consequence of how rendering works (async rendering and DOM interop overlap). The fix looks good. +1 to ask copilot to make a side branch with test and without the fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area-blazor Includes: Blazor, Razor Components

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

4 participants