Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accordion Solid Start SSR #385

Open
0-don opened this issue Apr 13, 2024 · 0 comments
Open

Accordion Solid Start SSR #385

0-don opened this issue Apr 13, 2024 · 0 comments

Comments

@0-don
Copy link

0-don commented Apr 13, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant