Tabs component should walkthrough it's children

[matthewlal]

When registering Tabs, TabList, Tab, TabPanel as custom components in the Builder.io Visual Editor then setting up Layers / DOM in the Builder Visual Editor, ie:

• Tabs
  • TabList
    • Tab
  • TabPanel

I get this error:

Actual value for useContext(qui--tab-list) can not be found, make sure some ancestor component has set a value using useContextProvider(). In the browser make sure that the context was used during SSR so its state was serialized.

I tried this as workaround in the Tabs component I registered as a custom component, which got rid of the error, but the component wasn't displaying anything.

export const CustomTabs = component$((props: TabsProps) => {
  useContextProvider(tabsContextId, {
    selectTab$: $(() => {}),
    onTabKeyDown$: $(() => {}),
    selectIfAutomatic$: $(() => {}),
    selectedTabIdSig: useSignal(''),
    tabsPrefix: ''
  })
  useContext(tabsContextId)
  
  return (
      <Tabs>
        <Slot/>
      </Tabs>
  )
}

I also tried using the inline Tabs implementation to inform the Tabs component that its subcomponents are wrapped by <Blocks/> from Builder.io when being registered as a custom component, but this also didn't work.

Currently my workaround to enable Builder.io editors and designers to make any Tabs is to make a custom component with all the components in it (Tabs, TabList, Tab, TabPanel) then handle it's children to dynamically customize how I should render the TabList, Tab, and TabPanel, and also implement a way to handle repeat.collection to dynamically bind many Tabs and TabPanels.

I reviewed this issue with @thejackshelton and he believes the issue is that Tabs component needs to be able to walk through its children regardless of its direct children.

[intellix]

I've just run into this same problem. I'm using Builder CMS to add the TabPanes as children and since they're added via a Slot with the Tabs.Content being inside a child component, they're never registered:

qwik-ui/packages/kit-headless/src/components/tabs/tabs.tsx

Line 123 in ca3bd96

case TabPanel: {

I believe it could work in a more flexible way by having Tabs.Root provide tabsInfo in a context and then the tabs register themselves in that context, which the Root can react to additions.

For example, this doesn't work today:

const InnerTabPanel = component$(() => {
  return <Tabs.Panel>Content 1</Tabs.Panel>;
});

export default component$(() => {
  return (
    <Tabs.Root selectedIndex={1}>
      <Tabs.List>
        <Tabs.Tab>Tab 1</Tabs.Tab>
        <Tabs.Tab>Tab 2</Tabs.Tab>
        <Tabs.Tab>Tab 3</Tabs.Tab>
      </Tabs.List>

      <InnerTabPanel />
    </Tabs.Root>
  );
});

[thejackshelton]

Hey @intellix! In the upcoming QDS component library inline components / looking through children is no longer needed, including in our tabs component.

https://github.com/kunai-consulting/qwik-design-system/tree/v2-migration/libs/components/src/tabs

You can consume @qds.dev/ui in v2, this library is v2 only as it fixes the indexing problems you're currently seeing in v1.