fix(components): [time-picker] close pick when click clear on pick open (#15390)

closed #15355

Co-authored-by: warmthsea <2586244885@qq.com>

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([

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')
 }