fix(v-model): number modifier should update input value

[cszhjh]

fix #13958

Summary by CodeRabbit

• Bug Fixes

  • Inputs using v-model with the number (and trim) modifier now normalize their value on change events so the displayed value matches the formatted numeric value (e.g., "+01.2" becomes "1.2" after change).

• Tests

  • Expanded tests to verify normalization and change-event behavior for v-model with the number modifier.

[coderabbitai]

Walkthrough

Extends vModel change-event handling to apply number casting (in addition to trim), aligning change-driven normalization with input-driven normalization. Tests updated to dispatch a change event and assert the input’s displayed value is reformatted (e.g., "+01.2" → "1.2") after change.

Changes

Cohort / File(s)	Summary
Directive logic: vModel change handling packages/runtime-dom/src/directives/vModel.ts	Change listener now installs for trim or number modifiers. On change, computes newValue by optionally trimming and/or casting to number before assignment, ensuring normalization on change events matches input events.
Tests: vModel number modifier behavior packages/runtime-dom/__tests__/directives/vModel.spec.ts	Test adds an extra nextTick, dispatches a change event after entering "+01.2", and asserts the input value updates to "1.2" post-change to validate change-event-driven DOM synchronization.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant U as User
  participant I as Input (v-model.number)
  participant D as vModel Directive
  participant M as Model
  participant V as View/DOM

  rect rgb(250,250,255)
    note over U,I: Typing (input event)
    U->>I: type "+01.2"
    I-->>D: input event
    D->>D: normalize (cast to number)
    D->>M: update modelValue (1.2)
    D->>V: reflect value if needed
  end

  rect rgb(245,255,245)
    note over U,I: Commit (change/blur)
    U->>I: blur / dispatch change
    I-->>D: change event
    D->>D: normalize (trim and/or cast to number)
    D->>M: assign normalized value
    D->>V: set input.value to normalized string "1.2"
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

I nibbled numbers, crisp and bright,
From “+01.2” to “1.2” in sight—delight!
A change event hop, a tidy cast,
View and model synced at last.
Thump-thump, I stamp my QA feet—🥕

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title succinctly describes the main change by indicating that the v-model number modifier will now update the input value, directly reflecting the core fix implemented in the code and tests.
Linked Issues Check	✅ Passed	The changes implement the required change event path for inputs using the number modifier by installing a change listener that casts and updates the input value and the added test now verifies that the DOM reflects the normalized number on change, fully satisfying the issue’s expectations.
Out of Scope Changes Check	✅ Passed	All modifications are confined to the vModel directive and its tests to specifically add support for number modifier change events and validation of input updates, and no unrelated or extraneous changes are present.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ae42f08 and 825676a.

📒 Files selected for processing (1)

• packages/runtime-dom/__tests__/directives/vModel.spec.ts (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Redirect rules
• GitHub Check: Header rules
• GitHub Check: Pages changed

🔇 Additional comments (1)

packages/runtime-dom/__tests__/directives/vModel.spec.ts (1)

348-350: LGTM! Test correctly verifies change-event normalization.

The added assertions properly test the fix for issue #13958:

1. Line 347 confirms the model receives the parsed numeric value (1.2) on input
2. Lines 348-350 verify that on change (blur/Enter), the input's displayed value is normalized to "1.2"

This ensures data and view remain synchronized when using the .number modifier, matching the expected behavior where the DOM updates similar to the .trim modifier.

---

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 and usage tips.}

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	102 kB (+34 B)	38.6 kB (+15 B)	34.8 kB (+15 B)
vue.global.prod.js	160 kB (+35 B)	58.7 kB (+14 B)	52.3 kB (+15 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	46.7 kB	18.3 kB	16.7 kB
createApp	54.7 kB	21.3 kB	19.5 kB
createSSRApp	58.9 kB	23 kB	21 kB
defineCustomElement	60 kB	23 kB	21 kB
overall	68.8 kB	26.5 kB	24.2 kB

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

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

@vue/compiler-dom

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

@vue/compiler-sfc

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

@vue/compiler-ssr

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

@vue/reactivity

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

@vue/runtime-core

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

@vue/runtime-dom

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

@vue/server-renderer

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

@vue/shared

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

vue

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

@vue/compat

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

commit: 825676a