-
Notifications
You must be signed in to change notification settings - Fork 955
Open
Labels
bugSomething isn't workingSomething isn't workingtriageAwaiting initial review and prioritizationAwaiting initial review and prioritizationv4#4488#4488
Description
Environment
Not applicable.
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
4.2
Reproduction
https://github.com/nuxt-ui-templates/dashboard
Description
There is a hydration mismatch related to UNavigationMenu. You can clearly see it on the official dashboard template, so I didn't supply my own reproduction. It concerns these lines related to Accordion items in the menu:
<div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-1" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width:var(--reka-collapsible-content-width);--reka-accordion-content-height:var(--reka-collapsible-content-height);--reka-collapsible-content-height:0px;--reka-collapsible-content-width:0px;" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="reka-collapsible-content-v-0-0-2" hidden="">
versus
<div role="region" aria-labelledby="reka-accordion-trigger-v-0-0-1" data-state="closed" data-orientation="vertical" style="--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height); --reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;" class="data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden" id="reka-collapsible-content-v-0-0-2" hidden="">
It's inconspicious at first, but the difference is in the extra whitespace in the second vs first render within the style attribute.
--reka-accordion-content-width:var(--reka-collapsible-content-width);--reka-accordion-content-height:var(--reka-collapsible-content-height);
vs
--reka-accordion-content-width: var(--reka-collapsible-content-width); --reka-accordion-content-height: var(--reka-collapsible-content-height);
There's extra whitespace around the colon and semicolons, causing the hydration mismatch.
Additional context
No response
Logs
Metadata
Metadata
Assignees
Labels
bugSomething isn't workingSomething isn't workingtriageAwaiting initial review and prioritizationAwaiting initial review and prioritizationv4#4488#4488