From e112b9c83b8e1551f272b2b6feeac0244ba9ccce Mon Sep 17 00:00:00 2001
From: Ryan2128 <33176053+Ryan2128@users.noreply.github.com>
Date: Sun, 10 Jan 2021 20:30:44 -0600
Subject: [PATCH] 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
---
.../__tests__/input-number.spec.ts | 25 +++++++++++++++++++
packages/input-number/src/index.vue | 20 +++++++++------
website/docs/en-US/input-number.md | 2 +-
website/docs/es/input-number.md | 2 +-
website/docs/fr-FR/input-number.md | 2 +-
website/docs/jp/input-number.md | 2 +-
website/docs/zh-CN/input-number.md | 2 +-
7 files changed, 43 insertions(+), 12 deletions(-)
diff --git a/packages/input-number/__tests__/input-number.spec.ts b/packages/input-number/__tests__/input-number.spec.ts
index 20c445d7cf..72cb97227d 100644
--- a/packages/input-number/__tests__/input-number.spec.ts
+++ b/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: '',
+ 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)
+ })
})
diff --git a/packages/input-number/src/index.vue b/packages/input-number/src/index.vue
index 99d729699f..67d7b9755e 100644
--- a/packages/input-number/src/index.vue
+++ b/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({
- 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
diff --git a/website/docs/en-US/input-number.md b/website/docs/en-US/input-number.md
index 7d1252d100..7af6fe3cdd 100644
--- a/website/docs/en-US/input-number.md
+++ b/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 |
diff --git a/website/docs/es/input-number.md b/website/docs/es/input-number.md
index 1c4dd546a9..c334fcad2f 100644
--- a/website/docs/es/input-number.md
+++ b/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 |
diff --git a/website/docs/fr-FR/input-number.md b/website/docs/fr-FR/input-number.md
index 8a409d5a60..833e41bd35 100644
--- a/website/docs/fr-FR/input-number.md
+++ b/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 |
diff --git a/website/docs/jp/input-number.md b/website/docs/jp/input-number.md
index 4f5fcd4f74..c178148e11 100644
--- a/website/docs/jp/input-number.md
+++ b/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 |
diff --git a/website/docs/zh-CN/input-number.md b/website/docs/zh-CN/input-number.md
index 6de0d3ddb7..74d8359932 100644
--- a/website/docs/zh-CN/input-number.md
+++ b/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 |