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

cszhjh · 2025-10-02T13:10:12Z

Summary by CodeRabbit

Bug Fixes
- Inputs using v-model with the number (and trim) modifier now normalize and reformat their displayed value on change events so it matches the numeric model (e.g., "+01.2" becomes "1.2" after change), improving UI-model consistency.
Tests
- Expanded tests to cover normalization and change-event-driven update behavior for v-model with the number modifier.

coderabbitai · 2025-10-02T13:10:22Z

Walkthrough

Adds a castValue utility and uses it to normalize v-model input and change handlers (supports trim and number modifiers). Tests updated to dispatch a change event and assert the input 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`	Introduces `castValue(value, trim, number)` and replaces in-place trimming/casting with a single call. Change listener is attached when `trim` or `number` modifier is present; change handler uses `castValue` before assignment to normalize value.
Tests: vModel number modifier behavior `packages/runtime-dom/__tests__/directives/vModel.spec.ts`	Adds an extra `nextTick`, dispatches a `change` event after setting `"+01.2"`, and asserts the input value is reformatted to `"1.2"` 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 DOM

  rect rgb(250,250,255)
    note over U,I: Typing (input event)
    U->>I: type "+01.2"
    I-->>D: input event
    D->>D: castValue(el.value, trim?, number?)
    D->>M: update modelValue (1.2)
    D->>V: may update displayed value
  end

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

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

I nibbled digits till they shone so clean,
From +0 1 .2 to one point two, unseen—
A gentle change-event hop and cast,
Model and view aligned at last.
—🐇

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title clearly describes the primary fix by stating that the v-model number modifier will now update the input value, which directly matches the main change implemented in this pull request.
Linked Issues Check	✅ Passed	The PR implements the requested change by adding a change event listener and using a castValue helper to update the input’s displayed value when using the number modifier, thereby synchronizing view and model as described in issue #13958.
Out of Scope Changes Check	✅ Passed	All modifications are confined to the vModel directive and its associated test file and directly address the number modifier behavior without introducing unrelated changes elsewhere.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

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

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

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

github-actions · 2025-10-02T13:11:16Z

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	102 kB (+29 B)	38.6 kB (+12 B)	34.7 kB (-14 B)
vue.global.prod.js	160 kB (+29 B)	58.7 kB (+6 B)	52.3 kB (+34 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 · 2025-10-02T13:11:28Z

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: 7c88b2e

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/runtime-dom/src/directives/vModel.ts (1)
48-52: Consider adding an explicit return type for clarity.

The function implicitly returns any since looseToNumber can return either a number or the original value. While this works correctly, adding an explicit return type would improve type safety and code clarity.

Consider this refactor:
-function castValue(value: string, trim?: boolean, number?: boolean | null) {
+function castValue(value: string, trim?: boolean, number?: boolean | null): string | number {
   if (trim) value = value.trim()
-  if (number) value = looseToNumber(value)
-  return value
+  if (number) return looseToNumber(value)
+  return value
 }
This makes it clear that the function can return either a string or number, and avoids reassigning the value parameter to a different type.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

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

📒 Files selected for processing (1)

packages/runtime-dom/src/directives/vModel.ts (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

packages/runtime-dom/src/directives/vModel.ts (2)

packages/shared/src/general.ts (1)

looseToNumber (170-173)

packages/runtime-dom/src/modules/events.ts (1)

addEventListener (16-23)

⏰ 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). (4)

GitHub Check: Redirect rules
GitHub Check: Header rules
GitHub Check: Pages changed
GitHub Check: test / unit-test-windows

🔇 Additional comments (2)

packages/runtime-dom/src/directives/vModel.ts (2)

66-66: LGTM!

Good refactoring to use the castValue utility. This maintains the same behavior as the previous inline logic while improving code clarity and maintainability.

68-72: Approve runtime-dom vModel change; add or verify test

The change correctly syncs the input value for v-model.number on change events, but there’s no existing unit test covering this scenario—please add one for the reproduction case in issue #13958 or verify it manually.

edison1105 · 2025-10-14T03:36:15Z

/ecosystem-ci run

vue-bot · 2025-10-14T03:42:40Z

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
primevue	✅ success	✅ success
nuxt	✅ success	✅ success
radix-vue	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
pinia	✅ success	✅ success
test-utils	✅ success	✅ success
language-tools	✅ success	✅ success
quasar	✅ success	✅ success
router	✅ success	✅ success
vue-i18n	✅ success	✅ success
vuetify	✅ success	✅ success
vueuse	❌ failure	✅ success
vant	❌ failure	✅ success
vue-simple-compiler	✅ success	✅ success
vue-macros	✅ success	✅ success
vitepress	✅ success	✅ success

cszhjh · 2025-10-14T07:44:23Z

Do I need to make any further changes to move this PR forward? The errors from VueUse and Vant don’t seem to be related to this PR.

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

563840c

test: update

ae42f08

edison1105 added ready to merge The PR is ready to be merged. scope: v-model 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Oct 4, 2025

cszhjh added 2 commits October 4, 2025 13:56

Merge branch 'main' into fix/number-modifier

551f366

Merge branch 'main' into fix/number-modifier

825676a

KazariEX approved these changes Oct 13, 2025

View reviewed changes

baiwusanyu-c approved these changes Oct 13, 2025

View reviewed changes

chore(v-model): refactor value casting logic into a separate function

7c88b2e

coderabbitai bot reviewed Oct 14, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

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

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

cszhjh commented Oct 2, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Oct 2, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 2, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Oct 2, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

edison1105 commented Oct 14, 2025

Uh oh!

vue-bot commented Oct 14, 2025

Uh oh!

cszhjh commented Oct 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

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

Are you sure you want to change the base?

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

Conversation

cszhjh commented Oct 2, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

github-actions bot commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Size Report

Bundles

Usages

Uh oh!

pkg-pr-new bot commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

edison1105 commented Oct 14, 2025

Uh oh!

vue-bot commented Oct 14, 2025

Uh oh!

cszhjh commented Oct 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

cszhjh commented Oct 2, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Oct 2, 2025 •

edited

Loading

github-actions bot commented Oct 2, 2025 •

edited

Loading

pkg-pr-new bot commented Oct 2, 2025 •

edited

Loading