From 261012cd1f671bb263fe5cdfe37689a51d997b46 Mon Sep 17 00:00:00 2001 From: Carl Chen <71313168+cc-hearts@users.noreply.github.com> Date: Sun, 16 Nov 2025 09:35:12 +0800 Subject: [PATCH] fix(components): [input] fixed the onchange parameter when type is file (#14687) * fix(components): [input] fixed the onchange parameter when type is file BREAKING CHANGE : the onchange type of input has been enhanced to string FileList closed #14686 * fix: fix lint * fix: fix lint * fix(components): input remove error * perf(components): input change event emit event * fix(components): [input] add test & fix file clear * fix: fix unit test * perf: change input test name * chore: format --------- Co-authored-by: qiang --- docs/en-US/component/input.md | 26 +++++++++---------- .../components/input/__tests__/input.test.tsx | 10 +++++++ packages/components/input/src/input.ts | 3 ++- packages/components/input/src/input.vue | 4 +-- 4 files changed, 27 insertions(+), 16 deletions(-) diff --git a/docs/en-US/component/input.md b/docs/en-US/component/input.md index 45f8e33ce1..6305be354e 100644 --- a/docs/en-US/component/input.md +++ b/docs/en-US/component/input.md @@ -156,19 +156,19 @@ input/length-limiting ### Events -| Name | Description | Type | -| ----------------- | ----------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | -| blur | triggers when Input blurs | ^[Function]`(event: FocusEvent) => void` | -| focus | triggers when Input focuses | ^[Function]`(event: FocusEvent) => void` | -| change | triggers when the input box loses focus or the user presses Enter, only if the modelValue has changed | ^[Function]`(value: string \| number) => void` | -| input | triggers when the Input value change | ^[Function]`(value: string \| number) => void` | -| clear | triggers when the Input is cleared by clicking the clear button | ^[Function]`() => void` | -| keydown | triggers when a key is pressed down | ^[Function]`(event: KeyboardEvent \| Event) => void` | -| mouseleave | triggers when the mouse leaves the Input element | ^[Function]`(event: MouseEvent) => void` | -| mouseenter | triggers when the mouse enters the Input element | ^[Function]`(event: MouseEvent) => void` | -| compositionstart | triggers when the composition starts | ^[Function]`(event: CompositionEvent) => void` | -| compositionupdate | triggers when the composition is updated | ^[Function]`(event: CompositionEvent) => void` | -| compositionend | triggers when the composition ends | ^[Function]`(event: CompositionEvent) => void` | +| Name | Description | Type | +| ----------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | +| blur | triggers when Input blurs | ^[Function]`(event: FocusEvent) => void` | +| focus | triggers when Input focuses | ^[Function]`(event: FocusEvent) => void` | +| change | triggers when the input box loses focus or the user presses Enter, only if the modelValue has changed | ^[Function]`(value: string \| number, evt?: Event) => void` | +| input | triggers when the Input value change | ^[Function]`(value: string \| number) => void` | +| clear | triggers when the Input is cleared by clicking the clear button | ^[Function]`() => void` | +| keydown | triggers when a key is pressed down | ^[Function]`(event: KeyboardEvent \| Event) => void` | +| mouseleave | triggers when the mouse leaves the Input element | ^[Function]`(event: MouseEvent) => void` | +| mouseenter | triggers when the mouse enters the Input element | ^[Function]`(event: MouseEvent) => void` | +| compositionstart | triggers when the composition starts | ^[Function]`(event: CompositionEvent) => void` | +| compositionupdate | triggers when the composition is updated | ^[Function]`(event: CompositionEvent) => void` | +| compositionend | triggers when the composition ends | ^[Function]`(event: CompositionEvent) => void` | ### Slots diff --git a/packages/components/input/__tests__/input.test.tsx b/packages/components/input/__tests__/input.test.tsx index 052fd62dfb..6278639dab 100644 --- a/packages/components/input/__tests__/input.test.tsx +++ b/packages/components/input/__tests__/input.test.tsx @@ -638,6 +638,16 @@ describe('Input.vue', () => { }) }) + test('input change event return Event parameter', async () => { + const onChange = vi.fn() + const wrapper = mount(() => ) + + await wrapper.find('input').trigger('change') + await nextTick() + + expect(onChange).toHaveBeenCalledWith('', expect.any(Event)) + }) + test('modelValue modifiers', async () => { const number = ref() const trim = ref() diff --git a/packages/components/input/src/input.ts b/packages/components/input/src/input.ts index 7b7757c4de..365e67dcf2 100644 --- a/packages/components/input/src/input.ts +++ b/packages/components/input/src/input.ts @@ -230,7 +230,8 @@ export type InputPropsPublic = __ExtractPublicPropTypes export const inputEmits = { [UPDATE_MODEL_EVENT]: (value: string) => isString(value), input: (value: string) => isString(value), - change: (value: string) => isString(value), + change: (value: string, evt?: Event) => + isString(value) && (evt instanceof Event || evt === undefined), focus: (evt: FocusEvent) => evt instanceof FocusEvent, blur: (evt: FocusEvent) => evt instanceof FocusEvent, clear: () => true, diff --git a/packages/components/input/src/input.vue b/packages/components/input/src/input.vue index 8e9d35fde6..8ec1af0a7e 100644 --- a/packages/components/input/src/input.vue +++ b/packages/components/input/src/input.vue @@ -395,7 +395,7 @@ const setNativeInputValue = () => { const formatterValue = props.formatter ? props.formatter(nativeInputValue.value) : nativeInputValue.value - if (!input || input.value === formatterValue) return + if (!input || input.value === formatterValue || props.type === 'file') return input.value = formatterValue } @@ -458,7 +458,7 @@ const handleChange = async (event: Event) => { if (props.modelModifiers.lazy) { emit(UPDATE_MODEL_EVENT, value) } - emit(CHANGE_EVENT, value) + emit(CHANGE_EVENT, value, event) await nextTick() setNativeInputValue()