remove tab then Uncaught TypeError

[Gary Li]

Dear support

I experience Tab close then a prompt in Devloper tools occurs, please find description below

===

tab.js:1114 Uncaught TypeError: Cannot read properties of undefined (reading 'setAttribute')

    at Tab.setActive (tab.js:1114:1)

    at Tab.selectingContent (tab.js:2039:1)

    at Observer.<anonymous> (tab.js:1996:1)

    at Observer.notify (observer.js:86:1)

    at ComponentBase.trigger (component-base.js:255:1)

    at Tab.select (tab.js:1994:1)

    at Observer.<anonymous> (tab.js:1860:1)

    at Observer.notify (observer.js:86:1)

    at ComponentBase.trigger (component-base.js:255:1)

    at Tab.removeTab (tab.js:1836:1)

===

Code snippet

<TabComponent id='tbMain' heightAdjustMode='Auto' ref={(scope) => { tabObj = scope; }} showCloseButton={true} created={onCreated} >

            <TabItemsDirective>

              <TabItemDirective header={{'text':"XXX"}} content={XXX} />

              <TabItemDirective header={{'text':"YYY"}} content={YYY} />

            </TabItemsDirective>

          </TabComponent>

===

My snippet of package.json

    "@syncfusion/ej2-react-navigations": "^20.2.44",

    "react": "^18.2.0",

    "react-dom": "^18.2.0",

===

Regards

Gary

[Ruksar Moosa Sait]

Hi Gary,

We are unable to reproduce the issue at our end. But we suspect the selected tab item is not found or undefined based on your shared call stack. Share the below details to check further.

• Replicate the issue in the below sample or
• Sample demonstrating the issue.

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

Regards,

Ruksar Moosa Sait

[Gary Li]

Dear Sait

Thank you for providing the samples

i made a add tab button and add tab logic in the sample. https://stackblitz.com/edit/react-zonjds-qvbcbr?file=index.js
illustrate with 4 tabs: 'XXX' 'YYY' 'ZZZ' 'NEW TAB TITLE'

In your example, when closing 'NEW TAB TITLE' ,selected tab goes to the nearest tab (tab 'ZZZ' in the case)

In my case, when closing 'NEW TAB TITLE', selected tab goes to first tab 'XXX'. Doing this over time will prompt the call stack above.

Any way i can manipulate the close tab behavior like your example? Thanks

Regards

Gary

[Ruksar Moosa Sait]

Gary,

We have prepared a sample in Typescript sample and rendered it as a functional component to check your issue based on your shared details, but we are unable to reproduce the reported error. Try the sample and share the below details to proceed further.

• Replicate the issue in the below sample or
• A simple issue reproducing the sample
• Video demo replicating the issue.

Sample: https://stackblitz.com/edit/ej2-react-ts-schedule-es-pt-culture-sample-react-kr94dd?file=App.tsx