fix(components): [input-number] Displayed values is different from modelValue when use model-value (#15184)

* fix(components): [input-number] Displayed values error

* feat: remove await

* fix: remove async

* fix: arrange

* feat: add tset case

packages/components/input-number/__tests__/input-number.test.tsx

@@ -530,4 +530,40 @@ describe('InputNumber.vue', () => {
       expect(formItem.attributes().role).toBe('group')
     })
   })
+
+  test('use model-value', () => {
+    const num = ref(2)
+    const wrapper = mount(() => (
+      <InputNumber modelValue={num.value} min={1} max={10} />
+    ))
+    const elInput = wrapper.findComponent({ name: 'ElInputNumber' }).vm
+    elInput.handleInputChange('')
+    expect(wrapper.getComponent(InputNumber).emitted('change')).toHaveLength(1)
+    expect(elInput.modelValue).toBe(2)
+    expect(wrapper.getComponent(InputNumber).emitted().change[0]).toEqual([
+      null,
+      2,
+    ])
+
+    elInput.increase()
+    expect(wrapper.getComponent(InputNumber).emitted('change')).toHaveLength(2)
+    expect(elInput.modelValue).toBe(2)
+    expect(wrapper.getComponent(InputNumber).emitted().change[1]).toEqual([
+      3, 2,
+    ])
+
+    elInput.handleInputChange('12')
+    expect(wrapper.getComponent(InputNumber).emitted('change')).toHaveLength(3)
+    expect(elInput.modelValue).toBe(2)
+    expect(wrapper.getComponent(InputNumber).emitted().change[2]).toEqual([
+      10, 2,
+    ])
+
+    elInput.decrease()
+    expect(wrapper.getComponent(InputNumber).emitted('change')).toHaveLength(4)
+    expect(elInput.modelValue).toBe(2)
+    expect(wrapper.getComponent(InputNumber).emitted().change[3]).toEqual([
+      1, 2,
+    ])
+  })
 })

packages/components/input-number/src/input-number.vue

@@ -189,6 +189,7 @@ const increase = () => {
   const newVal = ensurePrecision(value)
   setCurrentValue(newVal)
   emit(INPUT_EVENT, data.currentValue)
+  setCurrentValueToModelValue()
 }
 const decrease = () => {
   if (props.readonly || inputNumberDisabled.value || minDisabled.value) return
@@ -196,6 +197,7 @@ const decrease = () => {
   const newVal = ensurePrecision(value, -1)
   setCurrentValue(newVal)
   emit(INPUT_EVENT, data.currentValue)
+  setCurrentValueToModelValue()
 }
 const verifyValue = (
   value: number | string | null | undefined,
@@ -257,6 +259,7 @@ const handleInputChange = (value: string) => {
   if ((isNumber(newVal) && !Number.isNaN(newVal)) || value === '') {
     setCurrentValue(newVal)
   }
+  setCurrentValueToModelValue()
   data.userInput = null
 }
 
@@ -280,6 +283,11 @@ const handleBlur = (event: MouseEvent | FocusEvent) => {
   }
 }
 
+const setCurrentValueToModelValue = () => {
+  if (data.currentValue !== props.modelValue) {
+    data.currentValue = props.modelValue
+  }
+}
 watch(
   () => props.modelValue,
   (value, oldValue) => {