[BUG] - Tabs destroyInactiveTabPanel unmounts inactive tabs' content

[n-d-r-d-g]

NextUI Version

2.4.1

Describe the bug

Hi,

I currently have 2 tabs and a Formik component in each. I need the form data to not be cleared when switching between the tabs. When I set destroyInactiveTabPanel={false}, the inactive tab's Formik instance gets unmounted as soon as I switch to the other tab.

I investigated this issue. I set a unique id on each content (simplified example).

<Tabs destroyInactiveTabPanel={false}>
  <Tab key="tab1">
    <p id="first">First tab content</p>
  </Tab>
  <Tab key="tab2">
    <input id="tab2" />
  </Tab>
</Tabs>

In DevTools, I can see 2 <div>s, one for each tab. The inactive tab has a display: none; but the content inside both tabs' <div>s are the same, i.e. the active tab's content. When I switch to the other tab, then the same happens. The inactive tab's content is unmounted. I tried setting unique keys on each tab and their content, but no luck.

Is there anything I'm doing wrong?

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

N/A

Expected behavior

I would expect all tabs to be mounted at all times when destroyInactiveTabPanel={false}.

Screenshots or Videos

No response

Operating System Version

Browser

Chrome

[linear]

ENG-942 [BUG] - Tabs `destroyInactiveTabPanel` unmounts inactive tabs' content

[wingkwong]

can you share a stackblitz project with Tabs + Formik for us to investigate?

[n-d-r-d-g]

@wingkwong I'm not able to get destroyInactiveTabPanel={false} working in this example. I didn't add Formik yet. Maybe you can look into it without Formik first?

In the Stackblitz example, type something in the input on the first tab. Switch to the second tab, then back to the first one. The text disappears.