Skip to content

fix(VNumberInput): prevent input changes when readonly#22692

Merged
J-Sek merged 1 commit intovuetifyjs:masterfrom
mixelburg:fix/vnumberinput-readonly-input
Mar 7, 2026
Merged

fix(VNumberInput): prevent input changes when readonly#22692
J-Sek merged 1 commit intovuetifyjs:masterfrom
mixelburg:fix/vnumberinput-readonly-input

Conversation

@mixelburg
Copy link
Copy Markdown
Contributor

Description

When a user selects text in a readonly VNumberInput and types a non-digit character (e.g. a space or letter), the onBeforeinput handler would still fire. Inside that handler, when the typed character doesn't match the allowed pattern, the code calls:

e.preventDefault()
inputElement!.value = potentialNewNumber  // empty string when invalid chars replace all text
nextTick(() => inputText.value = potentialNewNumber)

This inadvertently sets inputText to an empty string, which the computed setter interprets as clearing the value (model.value = null), breaking the readonly contract.

Fix

Add an early return at the top of onBeforeinput when controlsDisabled (readonly or disabled) is true. This is consistent with how toggleUpDown, clampModel, formatInputValue, and trimDecimalZeros already guard against mutations.

Changes

  • VNumberInput.tsx: add if (controlsDisabled.value) return guard to onBeforeinput
  • VNumberInput.spec.browser.tsx: add regression test for typing non-digit chars while readonly

Fixes #22677

When a user selects text in a readonly VNumberInput and types a non-digit
character, the onBeforeinput handler would fire, calculate an empty/null
potentialNewNumber, and then set inputText.value to that value — effectively
clearing the model even though the field is readonly.

Fix by returning early from onBeforeinput when controlsDisabled (readonly
or disabled) is true, consistent with how toggleUpDown, clampModel,
formatInputValue, and trimDecimalZeros already guard against mutations.

Fixes vuetifyjs#22677
@J-Sek J-Sek added T: bug Functionality that does not work as intended/expected C: VNumberInput labels Mar 7, 2026
@J-Sek J-Sek merged commit 2b1ed0d into vuetifyjs:master Mar 7, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

C: VNumberInput T: bug Functionality that does not work as intended/expected

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug Report][3.12.2] VNumberInput input value can be changed when component is readonly.

2 participants