Skip to content

Commit

Permalink
fix(VNumberInput): emit model when input is a number between max & min
Browse files Browse the repository at this point in the history
fixes #20337
  • Loading branch information
yuwu9145 authored and blalan05 committed Nov 9, 2024
1 parent 7f06142 commit e52c6ad
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 1 deletion.
9 changes: 8 additions & 1 deletion packages/vuetify/src/labs/VNumberInput/VNumberInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,14 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
const model = computed({
get: () => _model.value,
set (val) {
if (typeof val !== 'string') _model.value = val
if (val === null) {
_model.value = null
return
}

if (!isNaN(+val) && +val <= props.max && +val >= props.min) {
_model.value = +val
}
},
})

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,46 @@ describe('VNumberInput', () => {
expect(model.value).equal(null)
})
})

// https://github.com/vuetifyjs/vuetify/issues/20337
it('should emit model-value when input value is a legit number within range of the max and min', () => {
const model = ref(null)

cy.mount(() => (
<>
<VNumberInput
v-model={ model.value }
min={ 5 }
max={ 125 }
/>
</>
))
.get('.v-number-input input')
.focus().realType('1')
.then(() => {
expect(model.value).equal(null)
})
.get('.v-number-input input')
.realType('0')
.then(() => {
expect(model.value).equal(10)
})
.realType('0')
.then(() => {
expect(model.value).equal(100)
})
.realType('0')
.get('.v-number-input input')
.then(() => {
expect(model.value).equal(100)
})
.get('.v-number-input input')
.blur()
.then(() => {
expect(model.value).equal(125)
})
})

describe('readonly', () => {
it('should prevent mutation when readonly applied', () => {
const value = ref(1)
Expand Down

0 comments on commit e52c6ad

Please sign in to comment.