[Tabs] Tabs break when consuming tab data from a resource in some environments

[jakst]

This is very interesting! When consuming tabs from a resource, the Tabs component will flip out and ignore tab clicks in some environments.

I have an electron app where it's broken, and I also managed to reproduce it in a StackBlitz. When trying to reproduce it however, surprisingly it worked fine with a standard solid app but broke in a solid-start app 🤔 I have no idea what's going on here

To reproduce, compare the following in the two stackblitzes below

1. Open the Stackblitz
2. Observe that the Banana tab is selected in solid, but not in solid-start
3. Click one one of the other tabs
4. Observe that the clicked tab is selected in solid, but not in solid-start

Plain solid (working) https://stackblitz.com/edit/github-324i4c?file=src%2FApp.tsx Solid start (not working) https://stackblitz.com/edit/solid-ssr-vite-xnqt3j?file=src%2Froutes%2Findex.tsx

[armandsalle]

Hey 👋

I found a workaround that works for me by wrapping the Tabs component with a Show component to render the tabs when the ressource is no longer loading

<Show when={!tabs.loading}>
      <Tabs.Root
        aria-label="Main navigation"
        class="tabs"
        value={value()}
        onChange={setValue}
      >
        <Tabs.List class="tabs__list">
          <For each={tabs()}>
            {(tab) => (
              <Tabs.Trigger class="tabs__trigger" value={tab}>
                {tab}
              </Tabs.Trigger>
            )}
          </For>

          <Tabs.Indicator class="tabs__indicator" />
        </Tabs.List>
      </Tabs.Root>
</Show>