fix(v-model): preserve pre-hydration user input across native controls

[edison1105]

close #14403

Summary by CodeRabbit

Release Notes

• Bug Fixes

  • v-model directives now preserve user-edited values during server-side rendering hydration across text inputs, checkboxes, radio buttons, and select elements, ensuring consistent state after hydration completes.

• Tests

  • Added hydration tests for v-model directive behavior across all input types.

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request introduces hydration-aware v-model directive handling to preserve user input values entered before server-side rendering (SSR) hydration completes. It extends directive hooks with an isHydrating flag, updates the hydration flow to pass this context, and implements logic in v-model directives to detect and preserve pre-hydration input values for text, checkbox, radio, and select inputs.

Changes

Cohort / File(s)	Summary
Test Coverage packages/runtime-core/__tests__/hydration.spec.ts	Added comprehensive tests verifying that pre-hydration user input values (text, checkbox, radio, select) are preserved after SSR hydration completes.
Directive Infrastructure packages/runtime-core/src/directives.ts	Extended DirectiveHook type and invokeDirectiveHook function to accept an optional isHydrating parameter (default false) and propagate it through directive hook invocations.
Hydration Flow packages/runtime-core/src/hydration.ts	Updated three directive hook invocations (created, beforeMount, mounted) to pass isHydrating = true during the hydration lifecycle phase.
V-Model Hydration Logic packages/runtime-dom/src/directives/vModel.ts	Implemented hydration-aware behavior across all v-model variants (text, checkbox, radio, select, dynamic) by: adding hydration state keys to track values during hydration; introducing helper utilities (getSelectedValue, isSelectValueEqual, setCheckboxValue); extending hook signatures to receive the hydrating flag; and conditionally preserving or reapplying user-edited values when hydrating is active.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested labels

:hammer: p3-minor-bug, scope:hydration

Poem

🐰 Through hydration's gentle flow,
Input values now will stay,
No more losses—we bestow,
User progress, come what may!
Directives dance with hydrating grace,
Preserving every keystroke's trace. ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main change: preserving user input values during v-model hydration on native controls, which directly addresses the linked issue.
Linked Issues check	✅ Passed	The PR implements hydration-aware v-model behavior across text inputs, checkboxes, radios, and selects to preserve user-entered values during hydration, directly addressing issue #14403's requirement.
Out of Scope Changes check	✅ Passed	All changes focus on hydration context threading through directive hooks and v-model preservation logic, remaining within the scope of preserving user input during hydration.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch edison/fix/14403

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	104 kB (+1.06 kB)	39.4 kB (+355 B)	35.5 kB (+282 B)
vue.global.prod.js	163 kB (+1.06 kB)	59.4 kB (+305 B)	52.8 kB (+227 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	47 kB (+7 B)	18.3 kB (-2 B)	16.8 kB (-3 B)
createApp	55.1 kB (+7 B)	21.4 kB (+3 B)	19.6 kB (-52 B)
createSSRApp	59.4 kB (+16 B)	23.2 kB (+5 B)	21.1 kB (+13 B)
defineCustomElement	60.8 kB (+7 B)	23.1 kB (-1 B)	21.1 kB (-3 B)
overall	69.5 kB (+7 B)	26.7 kB (+16 B)	24.3 kB (+5 B)

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14411

npm i https://pkg.pr.new/@vue/compiler-core@14411

yarn add https://pkg.pr.new/@vue/compiler-core@14411.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14411

npm i https://pkg.pr.new/@vue/compiler-dom@14411

yarn add https://pkg.pr.new/@vue/compiler-dom@14411.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14411

npm i https://pkg.pr.new/@vue/compiler-sfc@14411

yarn add https://pkg.pr.new/@vue/compiler-sfc@14411.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14411

npm i https://pkg.pr.new/@vue/compiler-ssr@14411

yarn add https://pkg.pr.new/@vue/compiler-ssr@14411.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14411

npm i https://pkg.pr.new/@vue/reactivity@14411

yarn add https://pkg.pr.new/@vue/reactivity@14411.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14411

npm i https://pkg.pr.new/@vue/runtime-core@14411

yarn add https://pkg.pr.new/@vue/runtime-core@14411.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14411

npm i https://pkg.pr.new/@vue/runtime-dom@14411

yarn add https://pkg.pr.new/@vue/runtime-dom@14411.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14411

npm i https://pkg.pr.new/@vue/server-renderer@14411

yarn add https://pkg.pr.new/@vue/server-renderer@14411.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14411

npm i https://pkg.pr.new/@vue/shared@14411

yarn add https://pkg.pr.new/@vue/shared@14411.tgz

vue

pnpm add https://pkg.pr.new/vue@14411

npm i https://pkg.pr.new/vue@14411

yarn add https://pkg.pr.new/vue@14411.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14411

npm i https://pkg.pr.new/@vue/compat@14411

yarn add https://pkg.pr.new/@vue/compat@14411.tgz

commit: 060199c