fix(components): [input-number] correct input event behavior (#9850)

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

@@ -212,6 +212,31 @@ describe('InputNumber.vue', () => {
     expect(wrapper.findComponent(ArrowUp).exists()).toBe(true)
   })
 
+  test('input-event', async () => {
+    const handleInput = vi.fn()
+    const num = ref(0)
+    const wrapper = mount(() => (
+      <InputNumber v-model={num.value} onInput={handleInput} />
+    ))
+    const inputWrapper = wrapper.find('input')
+    const nativeInput = inputWrapper.element
+    nativeInput.value = '0'
+    await inputWrapper.trigger('input')
+    expect(handleInput).toBeCalledTimes(0)
+    nativeInput.value = '1'
+    await inputWrapper.trigger('input')
+    expect(handleInput).toBeCalledTimes(1)
+    expect(handleInput).toHaveBeenCalledWith(1)
+    nativeInput.value = '2'
+    await inputWrapper.trigger('input')
+    expect(handleInput).toBeCalledTimes(2)
+    expect(handleInput).toHaveBeenCalledWith(2)
+    nativeInput.value = ''
+    await inputWrapper.trigger('input')
+    expect(handleInput).toBeCalledTimes(3)
+    expect(handleInput).toHaveBeenCalledWith(null)
+  })
+
   test('change-event', async () => {
     const num = ref(0)
     const wrapper = mount(() => <InputNumber v-model={num.value} />)
@@ -222,7 +247,6 @@ describe('InputNumber.vue', () => {
     expect(wrapper.getComponent(InputNumber).emitted().change[0]).toEqual([
       1, 0,
     ])
-    expect(wrapper.getComponent(InputNumber).emitted('input')).toHaveLength(1)
     expect(
       wrapper.getComponent(InputNumber).emitted('update:modelValue')
     ).toHaveLength(1)
@@ -233,7 +257,6 @@ describe('InputNumber.vue', () => {
     expect(wrapper.getComponent(InputNumber).emitted().change[1]).toEqual([
       2, 1,
     ])
-    expect(wrapper.getComponent(InputNumber).emitted('input')).toHaveLength(2)
     expect(
       wrapper.getComponent(InputNumber).emitted('update:modelValue')
     ).toHaveLength(2)

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

@@ -74,7 +74,13 @@ import {
 } from '@element-plus/hooks'
 import { debugWarn, isNumber, isString, isUndefined } from '@element-plus/utils'
 import { ArrowDown, ArrowUp, Minus, Plus } from '@element-plus/icons-vue'
+import {
+  CHANGE_EVENT,
+  INPUT_EVENT,
+  UPDATE_MODEL_EVENT,
+} from '@element-plus/constants'
 import { inputNumberEmits, inputNumberProps } from './input-number'
+
 import type { InputInstance } from '@element-plus/components/input'
 
 defineOptions({
@@ -179,12 +185,14 @@ const increase = () => {
   const value = props.modelValue || 0
   const newVal = ensurePrecision(value)
   setCurrentValue(newVal)
+  emit(INPUT_EVENT, data.currentValue)
 }
 const decrease = () => {
   if (props.readonly || inputNumberDisabled.value || minDisabled.value) return
   const value = props.modelValue || 0
   const newVal = ensurePrecision(value, -1)
   setCurrentValue(newVal)
+  emit(INPUT_EVENT, data.currentValue)
 }
 const verifyValue = (
   value: number | string | null | undefined,
@@ -209,7 +217,7 @@ const verifyValue = (
   }
   if (newVal > max || newVal < min) {
     newVal = newVal > max ? max : min
-    update && emit('update:modelValue', newVal)
+    update && emit(UPDATE_MODEL_EVENT, newVal)
   }
   return newVal
 }
@@ -218,16 +226,16 @@ const setCurrentValue = (value: number | string | null | undefined) => {
   const newVal = verifyValue(value)
   if (oldVal === newVal) return
   data.userInput = null
-  emit('update:modelValue', newVal!)
-  emit('input', newVal)
-  emit('change', newVal!, oldVal!)
+  emit(UPDATE_MODEL_EVENT, newVal!)
+  emit(CHANGE_EVENT, newVal!, oldVal!)
   if (props.validateEvent) {
     formItem?.validate?.('change').catch((err) => debugWarn(err))
   }
   data.currentValue = newVal
 }
 const handleInput = (value: string) => {
-  return (data.userInput = value)
+  data.userInput = value
+  emit(INPUT_EVENT, value === '' ? null : Number(value))
 }
 const handleInputChange = (value: string) => {
   const newVal = value !== '' ? Number(value) : ''
@@ -285,7 +293,7 @@ onMounted(() => {
     if (Number.isNaN(val)) {
       val = null
     }
-    emit('update:modelValue', val!)
+    emit(UPDATE_MODEL_EVENT, val!)
   }
 })
 onUpdated(() => {