javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): [date-picker] change triggers twice when clearing (#19804)

Browse Source 
* fix(components): [date-picker] change triggers twice when clearing

* fix(components): [date-picker] change triggers twice when clearing

* fix(components): [date-picker] add test

* fix(components): [date-picker] add test

* fix(components): [date-picker] add test

* fix(components): [date-picker] add test
This commit is contained in:
xingyixiang
2025-03-03 15:47:34 +08:00
committed by GitHub
parent 7d59595def
commit f932ea2dcb
2 changed files with 38 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
packages/components/date-picker/__tests__/date-picker.test.ts
View File

@@ -899,6 +899,41 @@ describe('DatePicker', () => {
expect(popper.getAttribute('aria-hidden')).toBe('false')
})
})
describe('Trigger the change event when clearing the date picker', () => {
it('click the button to clear the date', async () => {
const changeHandler = vi.fn()
const wrapper = _mount(
`<el-date-picker
v-model="value"
@change="changeHandler"
/>`,
() => ({ value: new Date(), changeHandler })
)
await wrapper.find('input').trigger('focus')
await wrapper.find('.el-input').trigger('mouseenter')
await wrapper.find('.clear-icon').trigger('click')
expect(changeHandler).toHaveBeenCalledTimes(1)
})
it('manually clear date', async () => {
const changeHandler = vi.fn()
const wrapper = _mount(
`<el-date-picker
v-model="value"
@change="changeHandler"
/>`,
() => ({ value: new Date(), changeHandler })
)
const input = wrapper.find('input')
await input.trigger('focus')
await input.setValue('')
await input.trigger('blur')
expect(changeHandler).toHaveBeenCalledTimes(1)
})
})
})
describe('DatePicker Navigation', () => {

4
packages/components/time-picker/src/common/picker.vue
View File

@@ -292,6 +292,8 @@ const emitChange = (
// determine user real change only
if (isClear || !valueEquals(val, valueOnOpen.value)) {
emit('change', val)
// Set the value of valueOnOpen when clearing to avoid triggering change events multiple times.
isClear && (valueOnOpen.value = val)
props.validateEvent &&
formItem?.validate('change').catch((err) => debugWarn(err))
}
@@ -540,7 +542,7 @@ const handleChange = () => {
}
if (userInput.value === '') {
emitInput(valueOnClear.value)
emitChange(valueOnClear.value)
emitChange(valueOnClear.value, true)
userInput.value = null
}
}