Bug Report: Tab Component Clearing Redux and Component State on Tab Swit

[rahul-crossml]

I encountered an issue with the ShadCN Tab component where switching between tabs clears both component state and Redux state. This occurs because the inactive tab content appears to be unmounted when switching tabs.

[FredrikMWold]

This is expected behavior Radix Tabs only mount the active content container. When a React component unmounts, its internal state is lost.

Could it be that your Redux provider is mounted inside Tabs.Content instead of at the root of your app? That would explain why the store is being cleared.

[Fengjing95]

How can I keep the original DOM structure when the tab is not selected? I don't see any relevant instructions in the API.

[FredrikMWold]

You could try force-mounting the Tabs.Content and conditionally applying display: none. That way, the content stays in the DOM but remains hidden when needed.

[Fengjing95]

You could try force-mounting the Tabs.Content and conditionally applying display: none. That way, the content stays in the DOM but remains hidden when needed.

Thank you. I also found a solution that can be achieved.

<TabsContent
   // ......
    forceMount
    hidden={item.id !== activeTermId}
  >