Open ywaby opened 8 months ago
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
use class:hidden='{!open}'
instand of {#if}
,maybe is a solution
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.
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.
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
Flowbite version and System Info