Error on DatePicker component for Blazor

1 Answer 333 Views
DatePicker
Alfredo
Top achievements
Rank 1
Alfredo asked on 12 Jul 2023, 11:45 PM | edited on 13 Jul 2023, 12:13 AM

Getting error when clicking on calendar icon in TelerikDatePicker in a Blazor Web Server app:

Error: System.NullReferenceException: Object reference not set to an instance of an object.
   at Telerik.Blazor.Components.TelerikDatePicker`1.get_AriaActiveDescendant()
   at Telerik.Blazor.Components.TelerikDatePicker`1.<BuildRenderTree>b__154_1(RenderTreeBuilder __builder2)
   at Microsoft.AspNetCore.Components.CascadingValue`1.Render(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)

Doesn't happen to all DatePickers, only on certain ones. 

Also, this only happens when the app is published to IIS on Windows Server 2019. This does not happen when running in development in Visual Studio 2022 Professional. 

Using Telerik UI for Blazor v3.5

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 14 Jul 2023, 05:39 PM

Hello Alfredo,

This error can occur due to a race condition, which is caused by fast multiple UI refreshes. As a result, the DatePicker is recreated several times one after the other, which destroys the nested Calendar component, and the DatePicker cannot find it. This causes the exception.

In general, the AriaActiveDescendant getter in our source code looks like this:

private string AriaActiveDescendant => IsPopupVisible ? CalendarRef.CurrentCellId : null;

IsPopupVisible is defined like this:

private bool IsPopupVisible => PopupRef?.Visible == true;

IsPopupVisible is not mentioned in the stack trace and CurrentCellId is always a Guid. So the error can occur only if PopupRef is defined and visible, but the CalendarRef is null.

I have seen this error a couple of times in the past and the developers were doing something like this:

  • Fast double refresh of the UI. For example, executing StateHasChanged inside an EventCallback, which leads to double StateHasChanged. (Blazor calls StateHasChanged after EventCallbacks automatically).
  • Subscribing to an event handler in such a way, so that it was getting called multiple times one after the other.
  • In one case, a customer confirmed that the DatePicker exception occurred when some code of another non-Telerik event hander was executed, but that's all I know - the customer seems to have resolved the problem on their own.

So my advice is to review the app logic, which revolves around the DatePicker and its value, as well as other related app event handlers. Try to find what is causing the multiple UI refreshing. Then, either reduce the number of UI refreshes, or insert a delay between them.

Regards,
Dimo
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
Tags
DatePicker
Asked by
Alfredo
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or