diff --git a/packages/components/input-number/__tests__/input-number.spec.ts b/packages/components/input-number/__tests__/input-number.spec.ts
index 85f5c9f2cc..c0854c74e4 100644
--- a/packages/components/input-number/__tests__/input-number.spec.ts
+++ b/packages/components/input-number/__tests__/input-number.spec.ts
@@ -41,6 +41,25 @@ describe('InputNumber.vue', () => {
})
expect(wrapper.find('input').element.value).toEqual('1')
})
+ test('set modelValue undefined to display placeholder', async () => {
+ const wrapper = _mount({
+ template:
+ '',
+ setup() {
+ const inputText = ref(1)
+ return {
+ inputText,
+ }
+ },
+ })
+ expect(wrapper.find('input').element.value).toEqual('1')
+ wrapper.vm.inputText = undefined
+ await nextTick()
+ expect(wrapper.find('input').element.value).toEqual('')
+ expect(wrapper.find('input').element.getAttribute('aria-valuenow')).toEqual(
+ 'NaN'
+ )
+ })
test('min', async () => {
const wrapper = _mount({
template: '',
diff --git a/packages/components/input-number/src/input-number.ts b/packages/components/input-number/src/input-number.ts
index 758ab55ddd..d09616827c 100644
--- a/packages/components/input-number/src/input-number.ts
+++ b/packages/components/input-number/src/input-number.ts
@@ -20,7 +20,6 @@ export const inputNumberProps = buildProps({
},
modelValue: {
type: Number,
- required: true,
},
disabled: {
type: Boolean,
diff --git a/packages/components/input-number/src/input-number.vue b/packages/components/input-number/src/input-number.vue
index 9008ec5f5e..19959b57a8 100644
--- a/packages/components/input-number/src/input-number.vue
+++ b/packages/components/input-number/src/input-number.vue
@@ -79,7 +79,7 @@ import { inputNumberProps, inputNumberEmits } from './input-number'
import type { ComponentPublicInstance } from 'vue'
interface IData {
- currentValue: number
+ currentValue: number | undefined
userInput: null | number | string
}
@@ -133,7 +133,7 @@ export default defineComponent({
if (data.userInput !== null) {
return data.userInput
}
- let currentValue: number | string = data.currentValue
+ let currentValue: number | string | undefined = data.currentValue
if (isNumber(currentValue)) {
if (Number.isNaN(currentValue)) return ''
if (props.precision !== undefined) {
@@ -228,8 +228,7 @@ export default defineComponent({
() => props.modelValue,
(value) => {
let newVal = Number(value)
- if (newVal !== undefined) {
- if (isNaN(newVal)) return
+ if (!isNaN(newVal)) {
if (props.stepStrictly) {
const stepPrecision = getPrecision(props.step)
const precisionFactor = Math.pow(10, stepPrecision)
@@ -240,14 +239,15 @@ export default defineComponent({
if (props.precision !== undefined) {
newVal = toPrecision(newVal, props.precision)
}
- }
- if (newVal !== undefined && newVal > props.max) {
- newVal = props.max
- emit('update:modelValue', newVal)
- }
- if (newVal !== undefined && newVal < props.min) {
- newVal = props.min
- emit('update:modelValue', newVal)
+
+ if (newVal > props.max) {
+ newVal = props.max
+ emit('update:modelValue', newVal)
+ }
+ if (newVal < props.min) {
+ newVal = props.min
+ emit('update:modelValue', newVal)
+ }
}
data.currentValue = newVal
data.userInput = null