TypeError in telerik-blazor.js when using latest VS 2022 17.11.0 and Blazor 8.0.8

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Need More Info

Last Updated: 04 Sep 2024 06:44 by Thomas

Thomas

Created on: 19 Aug 2024 07:50

Category: UI for Blazor

Type: Bug Report

TypeError in telerik-blazor.js when using latest VS 2022 17.11.0 and Blazor 8.0.8

Hi Telerik Team,

when using the (currently) latest versions of VS (17.11.0) and Blazor 8.0.8 runtimes (and custom css theme version 8.2.0) I get the following error when running my project in debug mode:

TypeError: Cannot read properties of null (reading 'classList')
Stapelüberwachung:
> at e.addClass (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1122923)
>    at v.resetCallout (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1372516)
>    at v.adjustCalloutPosition (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1372355)
>    at e.invokeComponentMethod (https://localhost:7038/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1112736)
>    at https://localhost:7038/_framework/blazor.webassembly.js:1:2878
>    at new Promise (<anonymous>)
>    at b.beginInvokeJSFromDotNet (https://localhost:7038/_framework/blazor.webassembly.js:1:2835)
>    at Object.vn [as invokeJSJson] (https://localhost:7038/_framework/blazor.webassembly.js:1:58849)
>    at https://localhost:7038/_framework/dotnet.runtime.8.0.8.80cvijctdx.js:3:178428
>    at Ll (https://localhost:7038/_framework/dotnet.runtime.8.0.8.80cvijctdx.js:3:179262)

It looks like the problem has something to do with a function that wants to set the css "k-callout-e" class to some object.
The problem appears in js when e is null in the following method:
e.classList.add(t)

In this case e = null and t = "k-callout-e". It seems there's no null check for e and VS 2022 reports the problem.

The debugger in VS cannot be disabled for js content as it seems it's the same debugger for Blazor itself.
When hitting F5 to continue multiple times the projects keeps running until it hits the same problem again.

In my project I added a single "TelerikTooltip" component for Tooltips. I tried disabling it but still the same problem.
Maybe the js code is used for some other component.

If you need more information just let me know.

Regards,
Tom

5 comments

Thomas

Posted on: 04 Sep 2024 06:44

Hi Nadezhda,

thank you for your time checking the problem. I tested it again with VS 2022 17.11.2 and I also couldn't reproduce the problem with the test project anymore. In my main project the error still exists. I'm sorry but I cannot send the big project. I'll try to find out more details about it. Maybe there's something else going on that triggers the problem. As soon as I can recreate it, I'll post here again.

Thank you again.

Regards,
Thomas

ADMIN

Nadezhda Tacheva

Posted on: 30 Aug 2024 09:20

Hi Thomas,

Thank you for sending the app!

I've tested it on my end but interestingly enough I am not hitting the reported issue. Here is the result I am getting: https://app.screencast.com/rXk4Y0tFSDZq3.

Can you please check on your end and let me know if I am missing something? Do you reproduce the problem in this exact app? Is there any other action I need to perform to reproduce it?

Without a reproduction, I am not able to debug and investigate, so we need to first cover this as a starting point.

Regards,
Nadezhda Tacheva
Progress Telerik

Do you have a stake in the designеr-developer collaboration process? If so, take our survey to share your perspective and become part of this global research. You’ll be among the first to know once the results are out.
-> Start The State of Designer-Developer Collaboration Survey 2024

Thomas

Posted on: 23 Aug 2024 16:36

Hi Nadezhda,

I prepared a small demo with the relevant components as my main project is too big to find the problem.

This is just a standard blazor webassembly app with a button on the home page.
Simply click the button and then the error occurs. While merging my custom component into this test project I found the line where the problem occurs.

Please have a look at folder "CustomComponentBase" -> class "CustomWidgetChooserBase.cs".
There's a line calling "PopoverRef.Refresh();" where "PopoverRef" is a reference to the Popover component.

It seems that even as the component is already referenced the telerik.js doesn't have this object at that exact moment to set the "k-callout-e" class.

Maybe there is a better way to initialize the reference to the component beforehand.
Or maybe I'm doing something wrong here.

Regards,
Tom

Attached Files:

telerikblazorerrorwithpopover.zip

ADMIN

Nadezhda Tacheva

Posted on: 23 Aug 2024 13:56

Hi Thomas,

The "k-callout-e" CSS class is used for the Tooltip and Popover components.

Based on your description, it seems like the code fails as it cannot find the element to attach this class to. At this stage, I cannot confirm the root cause, though. Can you please provide an isolated runnable sample that reproduces this behavior? This will allow me to revise the exact scenario in which this error occurs and debug the code to find what causes the problem. Please also include any steps I need to perform to hit it.

Thank you in advance!

Regards,
Nadezhda Tacheva
Progress Telerik

Thomas

Posted on: 20 Aug 2024 06:51

Hi Telerik Team,

In the meantime I found a solution in VS 2022 to disable Javascript uncaught exceptions. In VS 2022 under (menu) Debug > Windows > Exception Settings > (new settings window) > Javascript exceptions it is possible to disable this sort of exceptions. Then everything works again. The problem seems to occure as soon as I add a grid to a page. But as of now I couldn't narrow it down more.

Regards,
Tom