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

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(

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"