Tabs switch will lost data in context

[ywaby]

Describe the bug

Switching tabs can lead to the loss of data in the context, such as the text within an element. I suspect this might be due to the re-creation of the input element when switching tabs.

Reproduction

import {   Tabs, TabItem } from 'flowbite-svelte';
<div >
	<Tabs>
		<TabItem title="a" defaultClass="">
			<Input />
		</TabItem>
		<TabItem title="b" defaultClass="">
			<Input />
		</TabItem>
	</Tabs>
</div>

Flowbite version and System Info

System:
    OS: Linux 6.1 Debian GNU/Linux trixie/sid
    CPU: (16) x64 AMD Ryzen 7 1700 Eight-Core Processor
    Memory: 885.58 MB / 7.71 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 20.10.0 - /usr/bin/node
    Yarn: 1.22.21 - ~/.npm/bin/yarn
    npm: 10.2.5 - /usr/local/bin/npm
    pnpm: 8.12.1 - ~/.npm/bin/pnpm
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.0.0 
    flowbite-svelte: ^0.44.20 => 0.44.20 
    svelte: ^4.2.7 => 4.2.8 
    vite: ^5.0.3 => 5.0.10 

[mavcook]

I'm encountering the same issue. It would be awesome to have an option where components either persist when switching tabs, or are destroyed (current behavior), depending on the user's preference. Both functionalities have their merits.

Workaround: I couldn't quickly figure out how to modify the Flowbite code to prevent the components from getting destroyed. However, thanks to shinokada's blog post (top contributor of flowbite-svelte): Creating a Svelte Tabs Component with Slot Props, there is Tab code that is easier to follow and modify to suit your needs. If you want to copy the styling of the flowbite tabs, take a look at the tailwindcss classes used here

[ywaby]

use class:hidden='{!open}' instand of {#if},maybe is a solution

[jonathanbaugh]

My temporary workaround was to copy the Tabs.svelte and TabItem.svelte files into my $lib and replace the context name 'ctx' with flowbiteSvelte.

I'm new to Sveltekit and Flowbite, so I'm not sure if this has other ramifications, but I am on a time crunch and needed to get superforms working in tabs.

I'm happy to submit a PR if this is a valid approach. If that context name needs to be parameterized, I can add that too.

[juliovedovatto]

I came across this issue while searching for a solution to this problem.

It seems that the implementation of this component differs a bit from what is implemented in the flowbite-react package.

I believe what @ywaby suggested would be a good solution for this case.

@shinokada I'm tagging you to check if a PR to address this issue is welcome or not.