From 49ec0d6206371e569d7e5d3a8c016bbdf9a7f4cf Mon Sep 17 00:00:00 2001
From: Alan Wang <wp_scut@163.com>
Date: Wed, 29 Dec 2021 14:27:23 +0800
Subject: [PATCH] fix(components): [el-input-number]set undefined to modelValue
 (#4869)

---
 .../__tests__/input-number.spec.ts            | 19 +++++++++++++++
 .../input-number/src/input-number.ts          |  1 -
 .../input-number/src/input-number.vue         | 24 +++++++++----------
 3 files changed, 31 insertions(+), 13 deletions(-)

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:
+        '<el-input-number :model-value="inputText" placeholder="input number"/>',
+      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: '<el-input-number :min="3" v-model="num" />',
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