SSR Hydration mismatch with HeadlessUI starting in 3.4.x
Vue version
3.4.5
Link to minimal reproduction
https://github.com/drewtownchi/ssr-hydration-issue
Steps to reproduce
Run the project and look at the console. I originally found this when working in an Astro project but recreated it in a standalone Vite SSR template as a minimal repro.
What is expected?
No hydration issue
What is actually happening?
The rendered id for the disclosure button is increasing by 2 every time but the expected always stays at 1
System Info
System:
OS: Windows 11 10.0.22621
CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
Memory: 16.18 GB / 31.95 GB
Binaries:
Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
npm: 8.19.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (120.0.2210.77)
Internet Explorer: 11.0.22621.1
Any additional comments?
This was not an issue on 3.3.x but all version since 3.4.0 have exhibited this behavior.
I believe the same hydration issue is affecting vuetify => issue
Here is a reproduction which includes both an attribute and style mismatch on Nuxt SSR starting on vue >= v3.4.0
@paro-paro
The value
attribute is added to the textarea
because of this line:
https://github.com/vuetifyjs/vuetify/blob/9e4daa81bfe3046fcf7e4a731809c3d554b3df54/packages/vuetify/src/components/VTextarea/VTextarea.tsx#L229
The value attribute of the textarea should be ignored