Fix: [Numberinput] Validation may not work with Vue 3.4.28 or higher #429 #433
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Proposed Changes
Numberinput
may have accepted an invalid user input without a validation error on Vue 3.4.28 or higher.Input
component usesv-model
instead of the combination of the:value
binding, and@input
and@change
event handlers. See "Background" for more details.v-model
bindings in<textarea>
. However, the type errors will be fixed if we upgrade Vue to 3.4.6 or higher.lazy
prop ofInput
.Background
Numberinput
should reject numbers which are not equal to the basis for stepping, and the basis is derived from thevalue
attribute unless themin
is given. Before Vue 3.4.28, updating thevalue
prop did not affect thevalue
attribute, however, Vue 3.4.28 or higher introduced a tweak that updates thevalue
attribute when thevalue
prop ischanged. Since the
value
attribute which defines the basis moves, the validation ofNumberinput
can be messed up. The problematic tweak is not applied tov-model
which the underlyingInput
did not use.The reason why
Input
did not usev-model
was to deal with thelazy
prop. Whilev-model
needs an optional.lazy
modifier if thelazy
prop istrue
, unfortunately, we cannot dynamically turn on / off the.lazy
modifier onv-model
. (modelModifiers
prop won't work with.lazy
modifier.) This is why I had to duplicate the<input>
and<textarea>
elements.