From b888046ad4bb95154baf2f57faa59a8038d60f54 Mon Sep 17 00:00:00 2001
From: blackie <blackywkl@gmail.com>
Date: Tue, 26 Jul 2022 17:42:40 +0800
Subject: [PATCH] fix(components): [time-picker] fix clear for range mode
 (#8961)

* fix(components): [time-picker] fix clear for range mode

* test: [time-picker] fix test error
---
 .../time-picker/__tests__/time-picker.test.ts | 28 +++++++++++++++++++
 .../time-picker/src/common/picker.vue         |  3 +-
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/components/time-picker/__tests__/time-picker.test.ts b/packages/components/time-picker/__tests__/time-picker.test.ts
index 155da69b65..d856bbe391 100644
--- a/packages/components/time-picker/__tests__/time-picker.test.ts
+++ b/packages/components/time-picker/__tests__/time-picker.test.ts
@@ -566,6 +566,34 @@ describe('TimePicker(range)', () => {
     })
   })
 
+  it('clear button', async () => {
+    const initDates = [
+      new Date(2016, 9, 10, 9, 40),
+      new Date(2016, 9, 10, 15, 40),
+    ]
+    const wrapper = _mount(
+      `<el-time-picker
+        v-model="value"
+        is-range
+      />`,
+      () => ({
+        value: initDates,
+      })
+    )
+    const findInputWrapper = () => wrapper.find('.el-date-editor')
+    const findClear = () => wrapper.find('.el-range__close-icon')
+
+    await nextTick()
+    const inputWrapper = findInputWrapper()
+    await inputWrapper.trigger('mouseenter')
+    await rAF()
+    const clearIcon = findClear()
+    await clearIcon.trigger('click')
+    await nextTick()
+    const vm = wrapper.vm as any
+    expect(vm.value).toEqual(null)
+  })
+
   it('selectableRange ', async () => {
     // left ['08:00:00 - 12:59:59'] right ['11:00:00 - 16:59:59']
     const wrapper = _mount(
diff --git a/packages/components/time-picker/src/common/picker.vue b/packages/components/time-picker/src/common/picker.vue
index 3bed181154..6c442ffd8f 100644
--- a/packages/components/time-picker/src/common/picker.vue
+++ b/packages/components/time-picker/src/common/picker.vue
@@ -86,7 +86,6 @@
         ]"
         :style="($attrs.style as any)"
         @click="handleFocusInput"
-        @mousedown="onMouseDownInput"
         @mouseenter="onMouseEnter"
         @mouseleave="onMouseLeave"
         @touchstart="onTouchStartInput"
@@ -109,6 +108,7 @@
           :disabled="pickerDisabled"
           :readonly="!editable || readonly"
           :class="nsRange.b('input')"
+          @mousedown="onMouseDownInput"
           @input="handleStartInput"
           @change="handleStartChange"
           @focus="handleFocusInput"
@@ -126,6 +126,7 @@
           :disabled="pickerDisabled"
           :readonly="!editable || readonly"
           :class="nsRange.b('input')"
+          @mousedown="onMouseDownInput"
           @focus="handleFocusInput"
           @blur="handleBlurInput"
           @input="handleEndInput"