From 2a568113a3cdfe07791a017be45839d5d700398e Mon Sep 17 00:00:00 2001
From: wzc520pyfm <1528857653@qq.com>
Date: Thu, 12 Sep 2024 21:50:31 +0800
Subject: [PATCH] fix(components): [time-picker] close pick when click clear on
 pick open (#15390)

closed #15355

Co-authored-by: warmthsea <2586244885@qq.com>
---
 .../__tests__/time-picker.test.tsx            | 27 +++++++++++++++++++
 .../time-picker/src/common/picker.vue         |  2 +-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/packages/components/time-picker/__tests__/time-picker.test.tsx b/packages/components/time-picker/__tests__/time-picker.test.tsx
index 363b4848b4..4e03903dbe 100644
--- a/packages/components/time-picker/__tests__/time-picker.test.tsx
+++ b/packages/components/time-picker/__tests__/time-picker.test.tsx
@@ -602,6 +602,33 @@ describe('TimePicker(range)', () => {
     expect(value.value).toEqual(null)
   })
 
+  it('should close pick when click the clear button on pick opened', async () => {
+    const value = ref([
+      new Date(2016, 9, 10, 9, 40),
+      new Date(2016, 9, 10, 15, 40),
+    ])
+    const wrapper = mount(() => <TimePicker v-model={value.value} is-range />)
+    const findInputWrapper = () => wrapper.find('.el-date-editor')
+    const findClear = () => wrapper.find('.el-range__close-icon')
+    const findPicker = () => wrapper.find('.el-picker-panel')
+
+    await nextTick()
+    const inputWrapper = findInputWrapper()
+    await inputWrapper.trigger('mouseenter')
+    await inputWrapper.trigger('mousedown')
+
+    await nextTick()
+    // when the input is clicked, the picker is displayed.
+    expect(findPicker()).toBeTruthy()
+    const clearIcon = findClear()
+    await clearIcon.trigger('click')
+
+    await nextTick()
+    expect(value.value).toEqual(null)
+    // when the "clear" button is clicked, the pick is hidden.
+    expect(findPicker().exists()).toBe(false)
+  })
+
   it('selectableRange ', async () => {
     // left ['08:00:00 - 12:59:59'] right ['11:00:00 - 16:59:59']
     const value = ref([
diff --git a/packages/components/time-picker/src/common/picker.vue b/packages/components/time-picker/src/common/picker.vue
index 43d63aa4bc..77d03ef3a0 100644
--- a/packages/components/time-picker/src/common/picker.vue
+++ b/packages/components/time-picker/src/common/picker.vue
@@ -521,7 +521,7 @@ const onClearIconClick = (event: MouseEvent) => {
     }
     emitChange(valueOnClear.value, true)
     showClose.value = false
-    pickerVisible.value = false
+    onHide()
   }
   emit('clear')
 }