[Bug]: Accordion / Collapsible components default open on SSR

[benjamincanac]

Environment

Developement/Production OS: Mac OS
Node version: 20.3.1
Package manager: pnpm@9
Radix Vue version: 1.8.2
Nuxt version: 3.11.2
Nuxt mode: universal
Nuxt target: server
CSS framework: tailwindcss@3.3.3
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

https://www.radix-vue.com/components/accordion

Steps to reproduce

Reload the documentation to see the menu open on client only.

Describe the bug

When using an Accordion with a default-value or a Collapsible with a default-open prop, the content will only be opened on client and blink when refreshing the page.

Expected behavior

No response

Context & Screenshots (if applicable)

No response

[teleskop150750]

@zernonia Look at my implementation

https://vue-primitives.netlify.app/?path=/story/components-accordion--single

https://github.com/morgenstern-ui/vue-primitives/blob/main/packages/vue-primitives/src/collapsible/CollapsibleContent.vue

[Cry0nicS]

Maybe relevant, as I didn't want to open another issue:

Same Accordion / Collapsible throws Hydration attribute mismatch when used with Nuxt and SSR (inclusive on the docs, linked in the initial post).

Hydration attribute mismatch on <div ... id=​"radix-vue-collapsible-content-57">​…​</div>​
  - rendered on server: id="radix-vue-collapsible-content-57"
  - expected on client: id="radix-vue-collapsible-content-8"

I'd assume useId() is required.

[zernonia]

Thanks @teleskop150750 .. however I don't think that fixes the issue.

@Cry0nicS it's not hydration issue. If you encountered hydration issue do check out #577

[teleskop150750]

Thanks @teleskop150750 .. however I don't think that fixes the issue.

@Cry0nicS it's not hydration issue. If you encountered hydration issue do check out #577

as far as I understand, the problem is in this code. First, the component is rendered with empty content. Then the parent component receives a link to "Presence". And only after that, if "present === true" the internal content is rendered

Link

[teleskop150750]

I get the initial value synchronously

Parent
usePresence

[teleskop150750]

Nuxt playground

[zernonia]

Thanks @teleskop150750 . You are right with the condition to render the content, however the animation still would stutter in SSR. You can try to load the Animated Accordion in your Nuxt playground at the top of the page, and observe 😁

[teleskop150750]

@zernonia A temporary solution Link

[zernonia]

Fixed in reka-ui@latest 😁
Can be observed in https://reka-ui.com/docs/components/accordion

[almarzn]

Hello, this is marked as completed, but I am still getting this issue with radix-vue@1.9.12

Could you fix this for 1.9 pls?