anmcgrath
Issues with Virtualise2D.razor and related JS (sheet-pointer-input, menu-target etc.) causing runtime errors
I wrote an issue using ChatGPT.
Description:
While using Virtualise2D.razor with BlazorDatasheet, I encountered multiple runtime errors related to JS event registration and UI virtualization. These issues occur when elements are not fully rendered but JS tries to attach event listeners.
Problems observed:
PointerInputService
Error: Cannot read properties of null (reading 'addEventListener')
Cause: sheetElement is not yet rendered when registerPointerEvents is called.
Effect: Pointer events (pointerup, pointerdown, pointermove, dblclick) fail to register.
MenuTargetService
Error: Cannot read properties of null (reading 'addEventListener')
Cause: The target element is not yet rendered when setContextListener is called.
Virtualise2D.razor
When rapidly changing selections or calling GenerateSheetBySelection, the UI sometimes updates incorrectly.
Using StateHasChanged() followed by Task.Delay() does not reliably wait for the DOM to render before JS initialization.
Expected behavior:
Event registration in JS should wait until the DOM element is available, using either a retry mechanism or lifecycle hooks.
Virtualisation updates in Virtualise2D should correctly reflect the previous selection if actions are throttled.
No runtime errors should be thrown when elements are temporarily null.
When I debug locally, everything works fine. However, after deploying to the server, probably due to network latency, the following error occurs:
Cannot read properties of null (reading 'addEventListener') TypeError: Cannot read properties of null (reading 'addEventListener') at MenuTargetService.setContextListener (http://x.x.x.x:5000/_content/BlazorDatasheet/js/menu-target.js:13:23) at http://x.x.x.x:5000/_framework/blazor.web.js:1:3047 at new Promise () at y.beginInvokeJSFromDotNet (http://x.x.x.x:5000/_framework/blazor.web.js:1:3004) at gn._invokeClientMethod (http://x.x.x.x:5000/_framework/blazor.web.js:1:62730) at gn._processIncomingData (http://x.x.x.x:5000/_framework/blazor.web.js:1:60119) at xn.onreceive (http://x.x.x.x:5000/_framework/blazor.web.js:1:53760) at WebSocket. (http://x.x.x.x:5000/_framework/blazor.web.js:1:81866)
The server UI reported the following error:
fail: BootstrapBlazor.Components.ErrorLogger[0]
BootstrapBlazorErrorBoundary OnErrorAsync log this error
Microsoft.JSInterop.JSException: Cannot read properties of null (reading '
addEventListener')
TypeError: Cannot read properties of null (reading 'addEventListener')
at MenuTargetService.setContextListener https://
Hi @gwwzzf can you give more information on when this occurs? Is it blazor server or wasm?
Title: Error when quickly switching buttons in Blazor Server app (likely due to network latency)
Environment:
Blazor Server
Local demo (no issue)
Server deployment (error occurs when clicking quickly)
Description: I’m using the Blazor Server model. On the web page, I created several buttons, and clicking different buttons generates new calculation tables.
When I demonstrate it locally, I can click the buttons quickly without any errors or messages.
After deploying it on the server:
If I click the buttons slowly → no error.
If I quickly switch between buttons → error occurs, possibly due to network latency.
Steps to Reproduce:
Deploy the app to a remote server.
Open the web page with multiple buttons.
Quickly click and switch between different buttons.
Expected Behavior:
The app should handle quick button clicks gracefully without errors.
Actual Behavior:
Errors occur when quickly switching buttons on the server side.
What I’ve Tried:
Followed AI suggestions and modified Virtualise2D.razor and some .js code.
The error still occurs.