starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

JSException: Cannot read properties of null (reading 'innerHTML') #1048

New Issue
Closed
opened 2026-01-29 17:48:20 +00:00 by claunia · 1 comment
claunia commented 2026-01-29 17:48:20 +00:00
Owner
Copy Link

Originally created by @OndrejUzovic on GitHub (Dec 1, 2023).

When RadzenHtmlControl is used in a way that a user clicks a button which in response programmatically sets the focus into that HtmlControl and then the user quickly triggers an action (e.g. button) which removes that HtmlControl and displays a different content a race condition causing the following JSException sporadically occurs:

blazor.server.js:1  [2023-12-01T17:02:06.169Z] Error: Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'innerHTML')
TypeError: Cannot read properties of null (reading 'innerHTML')
    at Object.queryCommands (https://localhost:44395/_content/Radzen.Blazor/Radzen.Blazor.js:1402:17)
    at https://localhost:44395/_framework/blazor.server.js:1:3506
    at new Promise (<anonymous>)
    at Ft.beginInvokeJSFromDotNet (https://localhost:44395/_framework/blazor.server.js:1:3480)
    at Ft._invokeClientMethod (https://localhost:44395/_framework/blazor.server.js:1:75072)
    at Ft._processIncomingData (https://localhost:44395/_framework/blazor.server.js:1:72696)
    at Ft.connection.onreceive (https://localhost:44395/_framework/blazor.server.js:1:67009)
    at i.onmessage (https://localhost:44395/_framework/blazor.server.js:1:51322)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Radzen.Blazor.RadzenHtmlEditor.UpdateCommandState()
   at Radzen.Blazor.RadzenHtmlEditor.OnFocus()
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

I can reliably reproduce this exception in my UI environment but unfortunately I am not able to create a simple example to reproduce it here.

This is kind of a similar exception which has already been resolved in #728 . However this exception is not covered by that solution.

The exception occurs in the following function because 'ref' is null.
image

To resolve this issue the input parameter 'ref' needs to be check for null. (like in #728)

E.g. when I provide this check into the code, the exception disappears:
html: ref != null ? ref.innerHTML : null,

Pease could you provide a fix? (If you agree with the proposed code change I can provide the pull-request.)

Originally created by @OndrejUzovic on GitHub (Dec 1, 2023). When RadzenHtmlControl is used in a way that a user clicks a button which in response programmatically sets the focus into that HtmlControl and then the user quickly triggers an action (e.g. button) which removes that HtmlControl and displays a different content a race condition causing the following JSException sporadically occurs: ``` blazor.server.js:1 [2023-12-01T17:02:06.169Z] Error: Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'innerHTML') TypeError: Cannot read properties of null (reading 'innerHTML') at Object.queryCommands (https://localhost:44395/_content/Radzen.Blazor/Radzen.Blazor.js:1402:17) at https://localhost:44395/_framework/blazor.server.js:1:3506 at new Promise (<anonymous>) at Ft.beginInvokeJSFromDotNet (https://localhost:44395/_framework/blazor.server.js:1:3480) at Ft._invokeClientMethod (https://localhost:44395/_framework/blazor.server.js:1:75072) at Ft._processIncomingData (https://localhost:44395/_framework/blazor.server.js:1:72696) at Ft.connection.onreceive (https://localhost:44395/_framework/blazor.server.js:1:67009) at i.onmessage (https://localhost:44395/_framework/blazor.server.js:1:51322) at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args) at Radzen.Blazor.RadzenHtmlEditor.UpdateCommandState() at Radzen.Blazor.RadzenHtmlEditor.OnFocus() at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState) ``` I can reliably reproduce this exception in my UI environment but unfortunately I am not able to create a simple example to reproduce it here. This is kind of a similar exception which has already been resolved in #728 . However this exception is not covered by that solution. The exception occurs in the following function because 'ref' is null. ![image](https://github.com/radzenhq/radzen-blazor/assets/55758368/07aa5221-9488-441c-a6fb-9c6cb9b786cb) To resolve this issue the input parameter 'ref' needs to be check for null. (like in #728) E.g. when I provide this check into the code, the exception disappears: ` html: ref != null ? ref.innerHTML : null,` Pease could you provide a fix? (If you agree with the proposed code change I can provide the pull-request.)
claunia commented 2026-01-29 17:48:20 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Dec 6, 2023):

If you believe you have found a fix feel free to submit a pull request.

@akorchev commented on GitHub (Dec 6, 2023): If you believe you have found a fix feel free to submit a pull request.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1048
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?