javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-12-19 09:09:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [input] fixed the onchange parameter when type is file (#14687)

Browse Source 
* 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 <qw13131wang@gmail.com>
This commit is contained in:
Carl Chen
2025-11-16 09:35:12 +08:00
committed by GitHub
parent 8d8174ce3a
commit 261012cd1f
4 changed files with 27 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
docs/en-US/component/input.md
View File

@@ -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

10
packages/components/input/__tests__/input.test.tsx
View File

@@ -638,6 +638,16 @@ describe('Input.vue', () => {
})
})
test('input change event return Event parameter', async () => {
const onChange = vi.fn()
const wrapper = mount(() => <Input onChange={onChange} />)
await wrapper.find('input').trigger('change')
await nextTick()
expect(onChange).toHaveBeenCalledWith('', expect.any(Event))
})
test('modelValue modifiers', async () => {
const number = ref()
const trim = ref()

3
packages/components/input/src/input.ts
View File

@@ -230,7 +230,8 @@ export type InputPropsPublic = __ExtractPublicPropTypes<typeof inputProps>
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,

4
packages/components/input/src/input.vue
View File

@@ -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()