We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Break page after remove tab using headerTemplate

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.

16 Replies 1 reply marked as answer

SR Swathi Ravi Syncfusion Team March 29, 2023 03:26 PM UTC

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



RV Ravikumar Venkatesan Syncfusion Team April 6, 2023 10:43 AM UTC

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



TT Ton That Hung April 7, 2023 09:33 AM UTC

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.



VD Vinitha Devi Murugan Syncfusion Team April 10, 2023 01:14 PM UTC

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



TT Ton That Hung April 12, 2023 02:08 AM UTC

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.



SK Satheesh Kumar Balasubramanian Syncfusion Team April 12, 2023 02:59 PM UTC

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.

Regards,
Satheesh Kumar B


TT Ton That Hung April 13, 2023 02:12 AM UTC

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.



VD Vinitha Devi Murugan Syncfusion Team April 13, 2023 01:24 PM UTC

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(LIST1searchText)}

            />


            <TabItemDirective

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

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

            />


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


Regards,

Vinitha



TT Ton That Hung April 14, 2023 02:20 AM UTC

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.



VD Vinitha Devi Murugan Syncfusion Team April 19, 2023 02:27 PM UTC

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



TT Ton That Hung April 20, 2023 02:20 AM UTC

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



VD Vinitha Devi Murugan Syncfusion Team April 20, 2023 02:29 PM UTC

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



TT Ton That Hung replied to Vinitha Devi Murugan April 21, 2023 01:19 AM UTC

Thanks for your update.



VD Vinitha Devi Murugan Syncfusion Team April 21, 2023 04:41 AM UTC

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



VD Vinitha Devi Murugan Syncfusion Team May 3, 2023 02:08 PM UTC

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.



VD Vinitha Devi Murugan Syncfusion Team May 10, 2023 11:34 AM UTC

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


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon