Unexpected behaviour with dynamic tabs

[Bergamof]

I need to implement a tab system like this

<script lang="ts">
    import Tabs from "spaper/components/Tabs/Tabs.svelte";
    import Tab from "spaper/components/Tabs/Tab.svelte";

    let tabs = [{id: 0}];
    let i = 0;

    function addTab() {
        tabs = [...tabs, {id: ++i}]
    }
</script>
<Tabs>
    {#each tabs as tab}
        <Tab label={tab.id}>
            {tab.id}
        </Tab>
    {/each}
    <Tab label="Add">
        <button on:click={addTab}>Click</button>
    </Tab>
</Tabs>

If at first, there is no problem, the newly created tabs are not placed as expected. I won't try an explanation, testing the snippet should be sufficient to understand.

Tried with Sveltekit, not with Svelte, but I don't think that makes a difference

[Oli8]

Hey, unfortunately I have no way to quickly fix this. I'll try to look that up when I have more time. In the meantime maybe you could do something like this :

<Tabs activeTab={1}>
  <Tab label="Add">
    <button on:click={addTab}>Click</button>
  </Tab>
  {#each tabs as tab}
    <Tab label={tab.id}>
      {tab.id}
    </Tab>
  {/each}
</Tabs>

[Bergamof]

Thanks for the reply I somehow fixed it by using the "native" way, with html tags.