[Feature Request] Add destroyInactiveTabPanel prop for Tabs component

[u3u]

Is your feature request related to a problem? Please describe.

In some cases, I hope that when switching tabs, the previous TabPanel will not be destroyed in order to preserve their state and avoid re-rendering.

Describe the solution you'd like

We can add a destroyInactiveTabPanel prop with a default value of false.
The inactive TabPanel can be hidden using display: none.
If the user wants to destroy the previous TabPanel every time they switch tabs, they can simply add it to the Tabs component.

Describe alternatives you've considered

Now can also achieve the same effect by yourself, but each time you need to write additional code or encapsulate it again.

const [selectedKey, setSelectedKey] = useState<TabKey>('basic');
const [canRenderTabs, setCanRenderTabs] = useState([selectedKey]);

const setSelectedTab = (key: TabKey) => {
  if (!canRenderTabs.includes(key)) setCanRenderTabs([...canRenderTabs, key]);
  setSelectedKey(key);
};

{canRenderTabs.map((key) => {
  const Content = tabsMap[key];
  const isSelected = key === selectedKey;

  return (
    <div className={twMerge(styles.panel, !isSelected && 'hidden')} key={key}>
      <Content />
    </div>
  );
})}

Screenshots or Videos

No response

[Softwaremanufaktur]

when creating a brand new project with nextui 2.4.0 the property "destroyInactiveTabPanel" is not recognized (yet) :-/

// package.json
...
"dependencies": {
		"@nextui-org/react": "^2.4.0",
...

[wingkwong]

@Softwaremanufaktur destroyInactiveTabPanel should be a prop for Tabs instead of Tab. The doc is incorrect. I'll update it.

[Neuro8]

Hi, I updated NextUI to 2.4.0 but the prop is not changing anything, my tab and the component within it keep being re rendered each time we switch tabs. Any idea why it could be the case?

I made sure to put the prop in Tabs as indicated above. And deleted Node_modules and reinstalled but the prop is still not working.

Thanks

[wingkwong]

@Neuro8 can u setup a minimal reproducible stackblitz project for us to investigate?

UPD: i can reproduce now. will take a look.

[drewdearing]

any update here? Setting destroyInactiveTabPanel to false does not prevent tab destruction.

[wingkwong]

@drewdearing the fix has been deployed to 2.4.2. Are you using the latest version?

[drewdearing]

@drewdearing the fix has been deployed to 2.4.2. Are you using the latest version?

Oh I didn't realize there was a fix based on this thread. I'll give it a try.