fix(v-model): preserve remaining text input types before hydration

[lazerg]

close #15210

Follow-up to #14411, which only preserved values for text inputs and textareas. The same handling now covers search, tel, password, email and url, whose value sanitization is a plain text normalization that can be reproduced from defaultValue.

The other types are left out on purpose. number, date, month, week, time, datetime-local, color and range sanitize based on validity or apply their own normalization, so a server rendered value can come back from the DOM as an empty string, a normalized date, a lowercased/defaulted color, or (for range) a clamped value, without anyone typing. Comparing those against defaultValue would report an edit that never happened and push the browser's replacement value into the model. hidden, submit, button and friends can't be edited by the user, so there is nothing to preserve there.

Summary by CodeRabbit

• Bug Fixes
  • Improved hydration for form controls using v-model, preserving values entered or bound before hydration.
  • Added consistent handling for text, search, telephone, password, email, URL, and textarea fields.
  • Prevented URL and multi-value email whitespace differences between server-rendered and client values from unexpectedly overwriting bound values.
  • Improved synchronization of initial values across supported form control types.

[coderabbitai]

📝 Walkthrough

Walkthrough

The change extends v-model hydration handling to supported text-like, URL, email, and textarea values. It adds default-value sanitization, broadens mounted synchronization, and adds tests for preserving user-entered values and whitespace differences.

Changes

Hydration value preservation

Layer / File(s)	Summary
Default-value sanitization packages/runtime-dom/src/directives/vModel.ts	Adds sanitization for textarea, text-like, URL, and email input values, including whitespace and newline normalization.
Hydration synchronization and tests packages/runtime-dom/src/directives/vModel.ts, packages/runtime-core/__tests__/hydration.spec.ts	Hydration and mounted synchronization use sanitized initial values for supported input types. Tests cover preserved user input and whitespace differences for URL and multiple email inputs.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• vuejs/core#14411: Introduced the earlier v-model hydration preservation logic that this change extends.

Suggested labels: scope:hydration

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.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
Linked Issues check	✅ Passed	The PR fully addresses issue #15210 by extending hydration coverage to all remaining eligible input types (search, tel, password, email, url) beyond the previously supported text inputs.
Out of Scope Changes check	✅ Passed	All changes focus on v-model hydration for eligible input types. No unrelated modifications present.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes preserving values for additional text input types during v-model hydration.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🧹 Nitpick comments (1)

packages/runtime-core/__tests__/hydration.spec.ts (1)

1713-1732: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add coverage for email[multiple] normalization.

Line 82 has a separate comma-token normalization path. This parameterized test covers email without multiple.

Add a hydration test with whitespace around comma-separated addresses. Verify that hydration preserves the browser value and does not replace the original bound value with the sanitized value.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/runtime-core/__tests__/hydration.spec.ts` around lines 1713 - 1732,
Extend the hydration coverage near the existing text-input test to include an
email input with the multiple attribute and comma-separated addresses containing
surrounding whitespace. During SSR hydration, set the browser value to the
whitespace-preserving address string and verify both input.value and the bound
reactive state retain that original value rather than the normalized form.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/runtime-core/__tests__/hydration.spec.ts`:
- Around line 1713-1732: Extend the hydration coverage near the existing
text-input test to include an email input with the multiple attribute and
comma-separated addresses containing surrounding whitespace. During SSR
hydration, set the browser value to the whitespace-preserving address string and
verify both input.value and the bound reactive state retain that original value
rather than the normalized form.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 6482b874-d453-46b1-9574-99836601e76e

📥 Commits

Reviewing files that changed from the base of the PR and between d2c458b and ff1103e.

📒 Files selected for processing (2)

• packages/runtime-core/__tests__/hydration.spec.ts
• packages/runtime-dom/src/directives/vModel.ts

[coderabbitai]

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.