fix: fix date-picker clear bug (#1114)

* fix: fix date-picker clear bug

* chore: update

* chore: update

packages/date-picker/__tests__/date-picker.spec.ts

@@ -1,4 +1,4 @@
-import Picker from '@element-plus/time-picker/src/common/picker.vue'
+import { CommonPicker } from '@element-plus/time-picker'
 import { mount } from '@vue/test-utils'
 import dayjs from 'dayjs'
 import { nextTick } from 'vue'
@@ -22,19 +22,26 @@ afterEach(() => {
 
 describe('DatePicker', () => {
   it('create & custom class & style', async () => {
+    const popperClassName = 'popper-class-test'
+    const customClassName = 'custom-class-test'
     const wrapper = _mount(`<el-date-picker
         :readonly="true"
         placeholder='test_'
         format='HH-mm-ss'
         :style="{color:'red'}"
-        class="customClass"
+        :class="customClassName"
-    />`)
+        :popperClass="popperClassName"
+    />`, () => ({ popperClassName, customClassName }))
     const input = wrapper.find('input')
     expect(input.attributes('placeholder')).toBe('test_')
     expect(input.attributes('readonly')).not.toBeUndefined()
     const outterInput = wrapper.find('.el-input')
-    expect(outterInput.classes()).toContain('customClass')
+    expect(outterInput.classes()).toContain(customClassName)
     expect(outterInput.attributes().style).toBeDefined()
+    input.trigger('blur')
+    input.trigger('focus')
+    await nextTick()
+    expect(document.querySelector('.el-picker__popper').classList.contains(popperClassName)).toBe(true)
   })
 
   it('select date', async () => {
@@ -87,10 +94,10 @@ describe('DatePicker', () => {
     expect(vm.value.getHours()).toBe(12)
     expect(vm.value.getMinutes()).toBe(0)
     expect(vm.value.getSeconds()).toBe(1)
-    const picker = wrapper.findComponent(Picker);
+    const picker = wrapper.findComponent(CommonPicker);
     (picker.vm as any).showClose = true
     await nextTick();
-    (picker.element.querySelector('.el-icon-circle-close') as HTMLElement).click()
+    (document.querySelector('.el-icon-circle-close') as HTMLElement).click()
     expect(vm.value).toBeNull()
   })
 

packages/date-picker/src/date-picker-com/panel-date-range.vue

@@ -579,6 +579,7 @@ export default defineComponent({
 
     // pickerBase.hub.emit('SetPickerOption', ['isValidValue', isValidValue])
     ctx.emit('set-picker-option', ['formatToString', formatToString])
+    ctx.emit('set-picker-option', ['handleClear', handleClear])
 
     const pickerBase = inject('EP_PICKER_BASE') as any
     const { shortcuts, disabledDate, cellClassName, format, defaultTime, defaultValue, arrowControl } = pickerBase.props

packages/time-picker/src/common/picker.vue

@@ -1,7 +1,4 @@
 <template>
-  <!-- todo popper props align left  -->
-  <!-- todo popper custom popper-class  -->
-  <!-- todo bug handleKeydown event twice  -->
   <el-popper
     ref="popper"
     v-model:visible="pickerVisible"
@@ -10,7 +7,7 @@
     pure
     trigger="click"
     v-bind="$attrs"
-    popper-class="el-picker__popper"
+    :popper-class="`el-picker__popper ${popperClass}`"
     transition="el-zoom-in-top"
     :gpu-acceleration="false"
     :stop-popper-mouse-event="false"
@@ -151,6 +148,7 @@ interface PickerOptions {
   getRangeAvaliableTime: any
   getDefaultValue: any
   panelReady: boolean
+  handleClear: any
 }
 
 // Date object and string
@@ -329,6 +327,7 @@ export default defineComponent({
         emitChange(null)
         showClose.value = false
         pickerVisible.value = false
+        pickerOptions.value.handleClear && pickerOptions.value.handleClear()
       }
     }
     const valueIsEmpty = computed(() => {

packages/time-picker/src/common/props.ts

@@ -5,6 +5,10 @@ export const defaultProps = {
     type: [Array, String],
     default: '',
   },
+  popperClass: {
+    type: String,
+    default: '',
+  },
   format: {
     type: String,
   },