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

  • Added/expanded tests to verify value normalization on change events 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 / 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

🎯 2 (Simple) | ⏱️ ~10 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 “fix(v-model): number modifier should update input value” precisely summarizes the core change by indicating a fix to the v-model number modifier’s behavior in updating the input value.
Linked Issues Check	✅ Passed	The PR introduces a change listener for the number modifier in vModel, applies numeric casting on change events, and adds a test that dispatches a change event and verifies the input value is reformatted as expected, directly addressing issue #13958’s requirements.
Out of Scope Changes Check	✅ Passed	All changes are confined to the vModel implementation and its tests for the number modifier and do not introduce unrelated features or modifications outside the scope of updating the input value on change.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• 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 563840c and ae42f08.

📒 Files selected for processing (1)

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

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/runtime-dom/tests/directives/vModel.spec.ts

⏰ 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

---

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: 551f366