Adding tab dynamically results in error when function is set in headerTemplate - "Cannot read properties of undefined (reading 'content')"

[Anthony]

I'm getting an error when adding a tab dynamically. The error is:

I've created a Stackblitz to show the issue. To reproduce the error:

1. Open Stackblitz (https://stackblitz.com/edit/react-ts-wktqpu?file=Hello.tsx)
   
2. In the Stackblitz browser window, click the button to create a new tab. This should work fine without an error.
3. Click the button again to create a second tab.
4. Click on the second tab that was just created. You'll get the error.

The only workaround I've been able to find for this issue is to always insert the tab at index 0. If I try inserting the tab at any other index, I get the error.

[Satheesh Kumar Balasubramanian]

Hi Anthony,

 

We have checked the shared sample and let you know that you have used both header and headerTemplate both property in TabItemModel. You can use either header (or) headerTemplate property in TabItemModel to render the tab header. Since, you have rendered only string in headerTemplate, we formed the string and assigned in header text property to resolve the reported issue.

 

https://stackblitz.com/edit/react-add-tab-dynamically?file=Hello.tsx

 

Hello.tsx:    

  const addComponentTab = () => {

    const headerStr: String = 'Header ' + tabHeaderCounter.current++;

    const newTabItem: TabItemModel = {

      header: { text: headerStr.toString() }, // If I don't set this I get an error after creating the second tab: "Cannot read properties of undefined (reading 'iconCss')""

      //headerTemplate: headerContent,

      content: componentContent,

    };

 

    tabComponentRef.current?.addTab([newTabItem], addTabCounter.current++);

  };

 

 

Kindly try the above sample and let us know if this meets your requirement.

 

Regards,

Satheesh Kumar B

[Anthony]

If I don't include "header" an error is thrown when I click the button to create the second tab.

I need to use "headerTemplate" because my header is a component. See updated StackBlitz (https://stackblitz.com/edit/react-ts-wktqpu?file=Hello.tsx). Notice that when you click the button a second time, an error is thrown.

Here is another Stackblitz that highlights the problem: https://stackblitz.com/edit/react-ts-6ypweu?file=Hello.tsx

To reproduce the error in the second Stackblitz I provided:

1. Click the ADD button to add one or more tabs.
2. Click the DELETE button once to delete a tab.
3. Click the ADD button again. You will get the error.

[Satheesh Kumar Balasubramanian]

Hi Anthony,

 

We have confirmed this as a bug and logged the defect report "Adding tab dynamically using headerTemplate gives error" which can be tracked from the following link. 

https://www.syncfusion.com/feedback/34139/adding-tab-dynamically-using-headertemplate-gives-error

The fix for this defect will be included in our upcoming patch release which is expected to be rolled out by April 26, 2022. We would appreciate your valuable patience until then.

 

Regards,

Satheesh Kumar B

[Anthony]

Thank you for confirming that this is a bug. Will the fix be back-ported to version 19.x or will it be only available in version 20.x?

[Vengatesh Maniraj]

Hi Anthony,

The fix will be available only in version 20.x

Regards,

Vengatesh 

[Vengatesh Maniraj]

Hi Anthony,

Thanks for being patience.

We are glad to announce that our weekly patch release v201.51 has been rolled out successfully. In this release, an issue with the Tab throwing script error while adding items with headerTemplate has been fixed. As a result, we recommend you upgrade to the latest version of our Syncfusion package to avail of those changes.

Release Notes: https://ej2.syncfusion.com/react/documentation/release-notes/20.1.51/?type=all#tab

Kindly check the reported defect in the latest version and get back to us if you need any further assistance.

Regards,

Vengatesh