From f932ea2dcb97c902a2e4586e2da76227d9f9c242 Mon Sep 17 00:00:00 2001
From: xingyixiang <452282988@qq.com>
Date: Mon, 3 Mar 2025 15:47:34 +0800
Subject: [PATCH] fix(components): [date-picker] change triggers twice when
 clearing (#19804)

* 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
---
 .../date-picker/__tests__/date-picker.test.ts | 35 +++++++++++++++++++
 .../time-picker/src/common/picker.vue         |  4 ++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/packages/components/date-picker/__tests__/date-picker.test.ts b/packages/components/date-picker/__tests__/date-picker.test.ts
index 4800e33c99..0e4687304f 100644
--- a/packages/components/date-picker/__tests__/date-picker.test.ts
+++ b/packages/components/date-picker/__tests__/date-picker.test.ts
@@ -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', () => {
diff --git a/packages/components/time-picker/src/common/picker.vue b/packages/components/time-picker/src/common/picker.vue
index 7b0b28d200..63627c989c 100644
--- a/packages/components/time-picker/src/common/picker.vue
+++ b/packages/components/time-picker/src/common/picker.vue
@@ -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
   }
 }