Break page after remove tab using headerTemplate

[Ton That Hung]

Hi Syncfusion Team,

After I upgrade to the latest Syncfusion's verison, I've faced the issue related headerTemplate.

Link sample: https://stackblitz.com/edit/react-hcymqm?file=index.js

Steps:

1. Click to 'X' icon to remove the first tab item(which using header template). The page will be broken and show the issue(image)
   
   

How can I fix this problems?

Best regards.

[Swathi Ravi]

Hi Ton,

We confirmed your reported problem “Script error throw after removing the tab using headerTemplate
” as a bug and logged the defect report. The fix for this defect will be included in our upcoming weekly patch release, which is expected to be rolled out by April 5, 2023. You can track the status of the fix at the following link:

Feedback : https://www.syncfusion.com/feedback/42500/script-error-throw-after-removing-the-tab-using-headertemplate

Regards,

Swathi Ravi

[Ravikumar Venkatesan]

Ton, the fix for the issue “Script error throw after removing the tab using header template” has been included in our weekly release 21.1.38. Upgrade to the latest version to resolve the issue.

Sample: https://stackblitz.com/edit/react-hcymqm-ts4yqn?file=index.js

[Ton That Hung]

Hi Ravikumar,

Thanks for your support.

I just found an error related to Textbox Component and TabComponent.

I only enter one character on the Textbox component. Seem like the textbox component is blurred after the Tab component re-rendered. I've checked this error and realized that the error wouldn't appear if I didn't use the headerTemplate.

Link sample: https://stackblitz.com/edit/react-nz3evx?file=index.js

Thanks.

[Vinitha Devi Murugan]

Hi Ton,

You can resolve the issue you reported by defining the headerTemplate as shown in the sample below.

https://stackblitz.com/edit/react-headertemplate?file=index.js

Please try the above sample and let us know if you need further assistance.

Regards,

Vinitha

[Ton That Hung]

Hi Vinitha,

Thanks for your support.

In my app, tab header contains some dynamic data. So, I need to use headerTemplate as a function so that I can easily re-render when the data changes, also I can use svg tag, a component, etc inside that too.

Is there a way to fix this error but still use headerTemplate as a function?

Thanks.

[Satheesh Kumar Balasubramanian]

Hi Ton,

You can prevent the React JSX component reload issue on state changes by rendering the React JSX component as children of Tab component.

https://ej2.syncfusion.com/react/documentation/tab/how-to/react-hooks-tab

Regards,

Satheesh Kumar B

[Ton That Hung]

Hi Satheesh,

Thanks for your support.

But I don't understand the example you gave me.

My requirement is: fix the error(https://www.syncfusion.com/forums/181409/break-page-after-remove-tab-using-headertemplate?reply=SF7z65) and still use headerTemplate.

The reason of using headerTemplate: Because using headerTemplate as a string makes it very difficult for me to pass components into header.

I don't understand how your example will help me in this case.

Thanks.

[Vinitha Devi Murugan]

Hi Ton,

Sorry for the inconvenience caused.

You can resolve your reported issue by using useCallback in the headerTemplate function, as shown in the code snippet below.

https://stackblitz.com/edit/react-headertemplate-as-function-solution?file=index.js

<TabItemDirective

              headerTemplate={React.useCallback(() =>
<div>Tab 1</div>, [])}

              content={() =>
tabContent(LIST1, searchText)}

            />

            <TabItemDirective

              headerTemplate={React.useCallback(() =>
<div>Tab 1</div>, [])}

              content={() =>
tabContent(LIST2, searchText)}

            />

Please try the sample provided and let us know if you require further assistance.

Regards,

Vinitha

[Ton That Hung]

Hi Vinitha,

Thanks for your support.

In the header, I have some dynamic data.

Example:

I want to display the number of items at each header tab.

In your example: the header Template is only rendered one time. So the header is not updated after the number of items is changed. How can I handle this case?

Link sample: https://stackblitz.com/edit/react-headertemplate-as-function-solution-ecfgpr?file=index.js

In addition, I don't understand the reason for blurring the textbox component after the header template of the Tab component is re-rendered(???). I think Textbox and Tab components are separate. I'm a bit curious what is the real reason behind this error.

Thanks.

[Vinitha Devi Murugan]

Hi Ton,

Q1: You can display the number of items in each tab by using below highlighted line. We modified your shared sample for your reference.

https://stackblitz.com/edit/headertemplate-solution

<TabItemDirective

              headerTemplate={React.useCallback(

                () => (

                  <div>Tab 1 ({filterList1.length})</div>

                ),

                [filterList1.length]

              )}

              content={() =>
tabContent(filterList1)}

            />

            <TabItemDirective

              headerTemplate={React.useCallback(

                () => (

                  <div>Tab 2 ({filterList2.length})</div>

                ),

                [filterList2.length]

              )}

              content={() =>
tabContent(filterList2)}

            />

          </TabItemsDirective>

Q2: While re-rendering the header template of the tab component, we set focus on the active tab header, which is the reason for the textbox blurring.

Regards,

Vinitha

[Ton That Hung]

Hi Vinitha,
Your provided example repeats the issue again: blur the Textbox component after entering text.

[Vinitha Devi Murugan]

Hello Ton,

As previously mentioned in the latest update, the textbox blurring occurred due to the focus being set on the active tab header while re-rendering the header template of the tab component. To address this, we recommend rendering the tab directives in HTML format, as demonstrated in the sample provided below.

Sample: https://www.syncfusion.com/feedback/43075/the-tab-header-does-not-update-with-dynamic-data-when-we-render-tab-directives-as

However, we are currently facing an issue with updating dynamic content in the tab header and have logged a bug report for the same. The fix for this defect will be included in our upcoming weekly patch release, which is expected to be rolled out by May 3, 2023. You can track the status of the fix at the following link:

Feedback: https://www.syncfusion.com/feedback/43075/the-tab-header-does-not-update-with-dynamic-data-when-we-render-tab-directives-as

Disclaimer: The inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

Regards,

Vinitha

[Ton That Hung]

Thanks for your update.

[Vinitha Devi Murugan]

Ton, You are most welcome. We will let you know once the fix for the issue is included.

[Vinitha Devi Murugan]

Ton, The fix for the issue has been rescheduled for the next weekly patch, which is scheduled for May 10, 2023. We will inform you once it has been included.

[Vinitha Devi Murugan]

Hi Ton,

The fix for the issue “The tab header does not update with dynamic data when we render tab directives as HTML elements” has been included in our weekly release 21.2.4. Upgrade to the latest version to resolve the issue.

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

Sample: https://stackblitz.com/edit/react-prevent-header-rerender-with-usecallback-zxyzwt?file=package.json

Regards,

Vinitha