Can't access property "offsetHeight", this.hdrEle is undefined

[Ahmed Ataullah]

Version 32.2.3

Seems like a race condition. Was not happening on .net 8 and Version 29.2.4

My page has lots of nested tabs and this error is triggered during loading only and intermittently. If the page loads successfully everything runs perfectly forever. Otherwise shortly after initial render it will barf with the following error:

System.InvalidOperationException: Unhandled exception occurred during interop call. ---> Microsoft.JSInterop.JSException: can't access property "offsetHeight", this.hdrEle is undefined ./modules/sf-tab.js/o.prototype.headerReady@http://localhost:44317/_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js:30:2078314 initialize@http://localhost:44317/_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js:30:2104858 processJSCall@http://localhost:44317/_framework/blazor.web.js:1:4452 beginInvokeJSFromDotNet@http://localhost:44317/_framework/blazor.web.js:1:4129 _invokeClientMethod@http://localhost:44317/_framework/blazor.web.js:1:68829 _processIncomingData@http://localhost:44317/_framework/blazor.web.js:1:66188 Cn/this.connection.onreceive@http://localhost:44317/_framework/blazor.web.js:1:59829 connect/</i.onmessage@http://localhost:44317/_framework/blazor.web.js:1:83922 at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, JSCallType callType, Object[] args) at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args) at Syncfusion.Blazor.Internal.SfBaseUtils.InvokeMethod(IJSRuntime jsRuntime, String methodName, Object[] methodParams) --- End of inner exception stack trace --- at Syncfusion.Blazor.Internal.SfBaseUtils.InvokeMethod(IJSRuntime jsRuntime, String methodName, Object[] methodParams) at Syncfusion.Blazor.SfBaseComponent.InvokeMethod(String methodName, Object[] methodParams) at Syncfusion.Blazor.Navigations.SfTab.OnAfterScriptRendered() at Syncfusion.Blazor.SfBaseComponent.OnAfterRenderAsync(Boolean firstRender) at Syncfusion.Blazor.Navigations.SfTab.OnAfterRenderAsync(Boolean firstRender) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

On certain pages with SPDFViewer2 the following error happens pointing to the same culprit

[2026-03-09T14:46:54.814Z] Error: System.InvalidOperationException: Unhandled exception occurred during interop call.

 ---> Microsoft.JSInterop.JSException: can't access property "offsetHeight", this.hdrEle is undefined

./modules/sf-tab.js/s.prototype.headerReady@http://localhost:44317/_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js:9:2495050

initialize@http://localhost:44317/_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js:9:2521594

processJSCall@http://localhost:44317/_framework/blazor.web.js:1:4452

beginInvokeJSFromDotNet@http://localhost:44317/_framework/blazor.web.js:1:4129

_invokeClientMethod@http://localhost:44317/_framework/blazor.web.js:1:68829

_processIncomingData@http://localhost:44317/_framework/blazor.web.js:1:66188

Cn/this.connection.onreceive@http://localhost:44317/_framework/blazor.web.js:1:59829

connect/</i.onmessage@http://localhost:44317/_framework/blazor.web.js:1:83922

   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, JSCallType callType, Object[] args)

   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)

   at Syncfusion.Blazor.Internal.SfBaseUtils.InvokeMethod(IJSRuntime jsRuntime, String methodName, Object[] methodParams)

   --- End of inner exception stack trace ---

   at Syncfusion.Blazor.Internal.SfBaseUtils.InvokeMethod(IJSRuntime jsRuntime, String methodName, Object[] methodParams)

   at Syncfusion.Blazor.SfBaseComponent.InvokeMethod(String methodName, Object[] methodParams)

   at Syncfusion.Blazor.Navigations.SfTab.OnAfterScriptRendered()

   at Syncfusion.Blazor.SfBaseComponent.OnAfterRenderAsync(Boolean firstRender)

   at Syncfusion.Blazor.Navigations.SfTab.OnAfterRenderAsync(Boolean firstRender)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

[Ahmed Ataullah]

Adding another related intermittent bug related to tabs. This too happens intermittently right after or during initial loading. If it doesn't happen on during load then it wont happen at all.

Seems like the cause is numerous nested sf tabs in mixed content mode (init or demand).

Unhandled exception occurred during interop call.

---> JSInterop.JSException: Cannot read properties of undefined (reading '0')

TypeError: Cannot read properties of undefined (reading '0')

    at triggerAnimation (sfpdfviewer.min.js)

    at headerReady (sfpdfviewer.min.js)

    at Object.initialize (sfpdfviewer.min.js)

    at processJSCall (blazor.web.js)

    at beginInvokeJSFromDotNet (blazor.web.js)

    at _invokeClientMethod (blazor.web.js)

    at _processIncomingData (blazor.web.js)

    at connection.onreceive (blazor.web.js)

    at onmessage (blazor.web.js)

   at JSRuntime.InvokeAsync[TValue](...)

   at JSRuntimeExtensions.InvokeVoidAsync(...)

   at SfBaseUtils.InvokeMethod(...)

   --- End of inner exception stack trace ---

   at SfBaseUtils.InvokeMethod(...)

   at SfBaseComponent.InvokeMethod(...)

   at SfTab.OnAfterScriptRendered()

   at SfBaseComponent.OnAfterRenderAsync(Boolean firstRender)

   at SfTab.OnAfterRenderAsync(Boolean firstRender)

   at Renderer.GetErrorHandledTask(...)

[Praveen Sellappan]

Hi Ahmed Ataullah,

We understand you are encountering an intermittent JS exception when loading nested tabs. To ensure our components are as robust as possible, we recently implemented enhanced exception handling in our latest version.

We have prepared a local test environment to investigate this, featuring four levels of nested Tab components. In this sample, we configured the LoadOn mode using both Init and Demand alternatively to match your setup. We tested this extensively in .NET 8 across both local and hosted like environments with latest version. While we navigated through various tab levels multiple times, the components functioned as expected without any errors.

We recognize that this issue occurs intermittently for you. We have attached our test sample for your reference. Please review it to see if it aligns with your implementation.

If the issue persists, please provide the following details so we can investigate further:

• Your complete Tab configuration and any customizations applied.
• The specific environment used to test the application.
• Clear steps to replicate the issue.
• A video capturing the reproduction of the error.
• Try to replicate the issue within the sample we shared.
• If possible, provide a minimal, reproducible sample that demonstrates the error.

Looking forward to your response.

Regards,

Praveen Sellappan

Attachment: sample_48f5a6c0.zip