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

[Bug Report][3.4.9] v-textarea SSR hydration attribute mismatch #18959

Closed
AlbertBrand opened this issue Jan 2, 2024 · 7 comments
Closed

[Bug Report][3.4.9] v-textarea SSR hydration attribute mismatch #18959

AlbertBrand opened this issue Jan 2, 2024 · 7 comments
Labels
S: triage upstream Problem with a third party library that we may have to work around

Comments

@AlbertBrand
Copy link

Environment

Vuetify Version: 3.4.9
Last working version: 3.4.6
Vue Version: 3.4.3
Browsers: Chrome 120.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

  • Add Vuetify to Nuxt 3 (default SSR mode)
  • Add a v-textarea and bind a ref
  • Let the page render and check the console:
[Vue warn]: Hydration attribute mismatch on <textarea class=​"v-field__input" rows=​"5" id=​"input-1" aria-describedby=​"input-1-messages">​Text in textarea​</textarea>​flex 
  - rendered on server: (not rendered)
  - expected on client: value="Text in textarea"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <VField ref=Ref< undefined > style= {--v-textarea-control-height: ''} onClick=fn<onControlClick>  ... > 
  at <VInput ref=Ref< undefined > modelValue="Text in textarea" onUpdate:modelValue=fn<onUpdate:modelValue>  ... > 
  at <VTextarea modelValue="Text in textarea" onUpdate:modelValue=fn > 
  at <VApp> 
  at <App key=3 > 
  at <NuxtRoot>

Expected Behavior

Correctly rendered/hydrated v-textarea.

Actual Behavior

Missing hydrated attribute in v-textarea.

Reproduction Link

https://stackblitz.com/edit/nuxt-starter-2izca7?file=app.vue

@KaelWD
Copy link
Member

KaelWD commented Jan 2, 2024

Looks like a vue 3.4 bug, it doesn't happen with 3.3.13

@KaelWD KaelWD added the upstream Problem with a third party library that we may have to work around label Jan 2, 2024
@AlbertBrand
Copy link
Author

Indeed, I upgraded Vue as well from 3.3.11 to latest.

@neutrino84
Copy link

I am seeing this with v-text-field as well

@MeleKun
Copy link

MeleKun commented Jan 9, 2024

should I ignore the hydration mismatch coming from v-text-field or go back to older version of vue

@KaelWD
Copy link
Member

KaelWD commented Jan 9, 2024

Should be fixed in vue 3.4.6

@KaelWD KaelWD closed this as completed Jan 9, 2024
@MeleKun
Copy link

MeleKun commented Jan 9, 2024

Should be fixed in vue 3.4.6

what do you mean o-0 am using vue 3.4.7 and it still has this issue

@KaelWD
Copy link
Member

KaelWD commented Jan 9, 2024

vuejs/core#10011

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
S: triage upstream Problem with a third party library that we may have to work around
Projects
None yet
Development

No branches or pull requests

4 participants