fix(input-number): fix input-number behavior error (#1252)

* fix(input-number): fix input-number behavior error

- After input-number is cleared, the focus is lost and the value of v-model is not changed when the value of Min is changed

* test(input-number): add input-number test case

* docs(input-number): update modelValue's description

packages/input-number/__tests__/input-number.spec.ts

@@ -217,4 +217,29 @@ describe('InputNumber.vue', () => {
     await wrapper.find('input').trigger('focus')
     expect(wrapper.getComponent(InputNumber).emitted('focus')).toHaveLength(1)
   })
+
+  test('clear', async () => {
+    const wrapper = _mount({
+      template: '<el-input-number v-model="num" :min="1"/>',
+      setup() {
+        const num = ref(2)
+        return {
+          num,
+        }
+      },
+    })
+    const elInput = wrapper.findComponent({ name: 'ElInputNumber' }).vm
+    elInput.handleInputChange('')
+    await nextTick()
+    expect(wrapper.vm.num).toBe(undefined)
+    elInput.increase()
+    await nextTick()
+    expect(wrapper.vm.num).toBe(1)
+    elInput.handleInputChange('')
+    await nextTick()
+    expect(wrapper.vm.num).toBe(undefined)
+    elInput.decrease()
+    await nextTick()
+    expect(wrapper.vm.num).toBe(1)
+  })
 })

packages/input-number/src/index.vue

@@ -64,6 +64,7 @@ import ElInput from '@element-plus/input'
 import { useGlobalConfig } from '@element-plus/utils/util'
 import { isValidComponentSize } from '@element-plus/utils/validators'
 import { elFormKey, elFormItemKey } from '@element-plus/form'
+import { toRawType } from '@vue/shared'
 
 import type { PropType } from 'vue'
 import type { ElFormContext, ElFormItemContext } from '@element-plus/form'
@@ -99,8 +100,10 @@ export default defineComponent({
       default: -Infinity,
     },
     modelValue: {
-      type: Number,
-      default: 0,
+      required: true,
+      validator: val => {
+        return toRawType(val) === 'Number' || val === undefined
+      },
     },
     disabled: {
       type: Boolean,
@@ -134,7 +137,7 @@ export default defineComponent({
 
     const input = ref(null)
     const data = reactive<IData>({
-      currentValue: 0,
+      currentValue: props.modelValue,
       userInput: null,
     })
 
@@ -230,8 +233,8 @@ export default defineComponent({
       ) {
         newVal = toPrecision(newVal, props.precision)
       }
-      if (newVal >= props.max) newVal = props.max
-      if (newVal <= props.min) newVal = props.min
+      if (newVal !== undefined && newVal >= props.max) newVal = props.max
+      if (newVal !== undefined && newVal <= props.min) newVal = props.min
       if (oldVal === newVal) return
       data.userInput = null
       emit('update:modelValue', newVal)
@@ -266,8 +269,8 @@ export default defineComponent({
             newVal = toPrecision(newVal, props.precision)
           }
         }
-        if (newVal >= props.max) newVal = props.max
-        if (newVal <= props.min) newVal = props.min
+        if (newVal !== undefined && newVal >= props.max) newVal = props.max
+        if (newVal !== undefined && newVal <= props.min) newVal = props.min
         data.currentValue = newVal
         data.userInput = null
       },
@@ -280,6 +283,9 @@ export default defineComponent({
       innerInput.setAttribute('aria-valuemin', props.min)
       innerInput.setAttribute('aria-valuenow', data.currentValue)
       innerInput.setAttribute('aria-disabled', inputNumberDisabled.value)
+      if (toRawType(props.modelValue) !== 'Number' && props.modelValue !== undefined) {
+        setCurrentValue(undefined)
+      }
     })
     onUpdated(() => {
       let innerInput = input.value.input

website/docs/en-US/input-number.md

@@ -170,7 +170,7 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |----| ----| ---| ----| -----|
-|modelValue / v-model | binding value| number | — | 0 |
+|modelValue / v-model | binding value| number / undefined | — | 0 |
 |min | the minimum allowed value | number | — | `-Infinity` |
 |max | the maximum allowed value | number | — | `Infinity` |
 |step | incremental step | number | — | 1 |

website/docs/es/input-number.md

@@ -172,7 +172,7 @@ Utilice el atributo `size` para establecer tamaños adicionales con `medium`, `s
 
 | Atributo          | Descripción                              | Tipo    | Valores aceptados | Por defecto |
 | ----------------- | ---------------------------------------- | ------- | ----------------- | ----------- |
-| modelValue / v-model | valor vinculado                          | number  | —                 | 0           |
+| modelValue / v-model | valor vinculado                          | number / undefined  | —                 | 0           |
 | min               | el valor mínimo permitido                | number  | —                 | `-Infinity`  |
 | max               | el valor maximo permitido                | number  | —                 | `Infinity`  |
 | step              | incremento (salto)                       | number  | —                 | 1           |

website/docs/fr-FR/input-number.md

@@ -170,7 +170,7 @@ Utilisez l'attribut `size` pour régler la taille avec `medium`, `small` ou `min
 
 | Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
 |----| ----| ---| ----| -----|
-| modelValue / v-model | La valeur liée. | number | — | 0 |
+| modelValue / v-model | La valeur liée. | number / undefined | — | 0 |
 | min | La valeur minimale autorisée. | number | — | `-Infinity` |
 | max | La valeur maximale autorisée. | number | — | `Infinity` |
 | step | Le pas pour l'incrémentation. | number | — | 1 |

website/docs/jp/input-number.md

@@ -170,7 +170,7 @@
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |----| ----| ---| ----| -----|
-|modelValue / v-model | バインディング値| number | — | 0 |
+|modelValue / v-model | バインディング値| number / undefined | — | 0 |
 |min | 最小許容値 | number | — | `-Infinity` |
 |max | 最大許容値 | number | — | `Infinity` |
 |step | インクリメンタルステップ | number | — | 1 |

website/docs/zh-CN/input-number.md

@@ -168,7 +168,7 @@
 ### Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |----------|-------------- |----------|--------------------------------  |-------- |
-| modelValue / v-model | 绑定值         | number | — | 0 |
+| modelValue / v-model | 绑定值         | number / undefined | — | 0 |
 | min      | 设置计数器允许的最小值 | number | — | -Infinity |
 | max      | 设置计数器允许的最大值 | number | — | Infinity |
 | step     | 计数器步长           | number   | — | 1 |