JS Exception on sfTab

Question

When I add a tab to my page, I get the following error:

fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]

Unhandled exception in circuit '8LE15HU4TTdFXxO1pVOMZLrUk86G2_4LdrvRYrIzCh4'.

Microsoft.JSInterop.JSException: Cannot read property 'closest' of null

TypeError: Cannot read property 'closest' of null

at Object.ut [as closest] (https://localhost:5001/_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js:1:842

5)

at s.render (https://localhost:5001/_content/Syncfusion.Blazor/scripts/sf-tab-a1eb99.min.js:1:757)

at Object.initialize (https://localhost:5001/_content/Syncfusion.Blazor/scripts/sf-tab-a1eb99.min.js:1:20470)

The tab is pretty simple so I don't understand what the error is. Can you help point me in the right direction?

Here is the Tab code Note that I get the error whether I include the CssClass property or not:

</TabHeader>

</ChildContent>

</TabItem>

</TabHeader>

</ChildContent>

</TabItem>

</TabItems>

</SfTab>

Here is the CSS added to the site.css file:

.tab_content .e-content .e-item {

font-size: 10px;

padding: 10px;

text-align: justify;

}

Balasubramanian Sattanathan · Accepted Answer

Hi John Meyer, 

Thanks for your reply. 
 
We have validated your requirement “how to correctly code the entire form on multiple tabs.” at our side and we suspect that your need is to field validation inside the Tab component. So we suggest you to refer and follow the below UG to know more details. 

UG: https://blazor.syncfusion.com/documentation/tabs/how-to/create-wizard-using-tab/ 

Kindly refer to the above UG and let us know the below details if you still face the problem at your side.  

Share your use case scenario with screenshot/video
Replicate your problem in the above shared sample or
Share a sample illustrating the problem which would help us to proceed further.

Regards, Balasubramanian S

Balasubramanian Sattanathan · Answer

Hi John Meyer, 
 
Greetings from Syncfusion Support. 
 
We have validated your reported problem “JS Exception on sfTab” at our side and prepared a simple Tab sample based on that. We have tried to replicate your problem in the below sample. But unfortunately, we are unable to reproduce it. Since the tab is rendered without any exceptions. We would suggest you to refer and follow the below UG and sample. 
 
Sample: https://www.syncfusion.com/downloads/support/forum/157060/ze/Tab_Blazor_sample-1423734291.zip 
UG: https://blazor.syncfusion.com/documentation/tabs/getting-started/ 
 
If you still face the reported problem at your side, kindly share the below details to serve you better. 

Replicate your problem in the above shared sample or
Share a sample illustrating the problem which would help us to proceed further.
 
Regards, Balasubramanian S

John Meyer · Answer

The error I outlined happens when I try to embed a sfTab within a Blazor EditForm element. As so as I pull the tabs out of the EditForm and drop it outside the form the error is no longer listed.

Now my problem is that I have a large form from a single table and a single model that I need to manage. Do I have to manage the submit differently when there are multple EditForm elements referring to the same model? What about Validation? I would like to include fields on the form both completely outside of the tab and also and within multiple tabs. I'm not sure how to accomplish this if the tabs need to be outside the EditForm. Are there examples available to show how to present a form with a large number of fields on multiple tabs. Ideally, the form would include master-detail elements as well however right now I am most concerned with how to correctly code the entire form on multiple tabs.

John Meyer · Answer

Hi,Yes, I think your example is similar enough to help with the pattern needed.Thank you,John

Vengatesh Maniraj · Answer

Hi John, 

Please try out our UG sample and get back to us if you need any further assistance. 

Regards, 
Vengatesh