kobalte icon indicating copy to clipboard operation
kobalte copied to clipboard

Accordion Solid Start SSR

Open 0-don opened this issue 1 year ago • 0 comments

Describe the bug There is a hydration issue with the Kobalte Accordion when using the defaultValue prop in a SolidStart application. The Accordion only functions correctly when Server-Side Rendering (SSR) is disabled.

<Accordion multiple defaultValue={["FAQ_WHAT_CAN_I_DO_HERE"]} class="w-full">
  <For each={faqs}>
    {({ question, answer }) => (
      <AccordionItem value={question}>
        <AccordionTrigger>{t()?.[question]}</AccordionTrigger>
        <AccordionContent innerHTML={t()?.[answer]} />
      </AccordionItem>
    )}
  </For>
</Accordion>

To Reproduce Steps to reproduce the behavior:

  1. Go to the page where the Accordion is implemented.
  2. Observe that the default value specified does not hydrate correctly when the page loads.
  3. Notice that disabling SSR temporarily resolves the issue.

Expected behavior The Accordion should properly hydrate with the default value specified (defaultValue={["FAQ_WHAT_CAN_I_DO_HERE"]}) when the page loads, without needing to disable SSR.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Linux
  • Browser Chrome
  • Version 20

Additional context This issue may be related to the initialization of state or props during the SSR phase. Further investigation into how SolidStart handles hydration in conjunction with the Kobalte Accordion's defaultValue might be required. The latest version of all related software is being used.

0-don avatar Apr 13 '24 13:04 0-don