Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tabs content not rendered in SSR context

See original GitHub issue

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

1.4.3

What browser are you using?

Chrome

Reproduction URL

https://github.com/sylvaingi/headless-ui-tabs-ssr-issue

Describe your issue

When using the Tab compoents in a SSR context (Next 12), the contents of the selected tab are not rendered.

For example the following code

<Tab.Group>
  <Tab.List>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
  </Tab.List>

  <Tab.Panels className="TAB_CONTENTS_HERE">
    <Tab.Panel>Contents of tab 1</Tab.Panel>
    <Tab.Panel>Contents of tab 2</Tab.Panel>
  </Tab.Panels>
</Tab.Group>

will yield the following HTML:

<div role="tablist" aria-orientation="horizontal">
  <button
    id="headlessui-tabs-tab-undefined"
    role="tab"
    type="button"
    aria-selected="false"
    tabindex="-1"
  >
    Tab 1</button
  ><button
    id="headlessui-tabs-tab-undefined"
    role="tab"
    type="button"
    aria-selected="false"
    tabindex="-1"
  >
    Tab 2
  </button>
</div>
<div class="TAB_CONTENTS_HERE"></div>

Issue Analytics

State:
Created 2 years ago
Comments:5

Top GitHub Comments

2reactions

RobinMalfaitcommented, Feb 25, 2022

Hey! Thank you for your bug report! Much appreciated! 🙏

This should be fixed by #1155, and will be available in the next release.

You can already try it using npm install @headlessui/react@insiders or yarn add @headlessui/react@insiders.

1reaction

JuHwoncommented, Feb 26, 2022

same here. layout shifts are gone, though it introduced hydration error: Warning: Did not expect server HTML to contain a <div> in <div>.

Top Results From Across the Web

Next js app with SSR is not pre-rendering HTML, so web ...

Within the auth context file, I was performing conditional rendering, depending on a loading state, which was causing SSR not to take place:....

Tabs - Reach UI

You can render any other elements you want inside of Tabs , but TabList should only render Tab elements, and TabPanels should only...

How To Crawl JavaScript Websites - Screaming Frog

Learn how to crawl JavaScript websites, SPAs, PWAs and frameworks such as React & Angular using the Screaming Frog SEO Spider tool.

Refreshing Server-Side Props - Next.js - Josh W Comeau

This brief tutorial shows how to re-fetch the props without doing a full ... After the page is server-rendered, those props are immutable....

Server Side Rendering - Search.io React SDK

If you're using @sajari/search-components with no search logic required... Copy. import { SSRProvider } from '@sajari/search-components'; export default () ...