fix(picker): add focus (#1475)

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

@@ -176,6 +176,21 @@ describe('DatePicker', () => {
     await nextTick()
     expect(document.querySelector('.disabled')).not.toBeNull()
   })
+
+  it('ref focus', async () => {
+    _mount(`<el-date-picker
+        v-model="value"
+        ref="input"
+      />`, () => ({ value: '' }), {
+      mounted() {
+        this.$refs.input.focus()
+      },
+    })
+    await nextTick()
+    const popperEl = document.querySelector('.el-picker__popper')
+    const attr = popperEl.getAttribute('aria-hidden')
+    expect(attr).toEqual('false')
+  })
 })
 
 describe('DatePicker Navigation', () => {

packages/date-picker/src/date-picker.ts

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue'
 import { DEFAULT_FORMATS_DATE, DEFAULT_FORMATS_DATEPICKER } from '@element-plus/time-picker'
 import { CommonPicker, defaultProps } from '@element-plus/time-picker'
 import DatePickPanel from './date-picker-com/panel-date-pick.vue'
@@ -44,11 +44,20 @@ export default defineComponent({
   },
   emits: ['update:modelValue'],
   setup(props, ctx) {
+    const commonPicker = ref(null)
     const format = DEFAULT_FORMATS_DATEPICKER[props.type] || DEFAULT_FORMATS_DATE
+    const refProps = {
+      ...props,
+      focus: () => {
+        commonPicker.value?.handleFocus()
+      },
+    }
+    ctx.expose(refProps)
     return () => h(CommonPicker, {
       format,
       ...props, // allow format to be overwrite
       type: props.type,
+      ref: commonPicker,
       'onUpdate:modelValue': value => ctx.emit('update:modelValue', value),
     },
     {

packages/directives/click-outside/index.ts

@@ -42,7 +42,7 @@ function createDocumentHandler(
       popperRef: Nullable<HTMLElement>
     }>).popperRef
     const mouseUpTarget = mouseup.target as Node
-    const mouseDownTarget = mousedown.target as Node
+    const mouseDownTarget = mousedown?.target as Node
     const isBound = !binding || !binding.instance
     const isTargetExists = !mouseUpTarget || !mouseDownTarget
     const isContainedByEl = el.contains(mouseUpTarget) || el.contains(mouseDownTarget)

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

@@ -289,6 +289,21 @@ describe('TimePicker', () => {
     expect(enabledMinutes).toEqual([0])
     expect(enabledSeconds).toEqual([0])
   })
+
+  it('ref focus', async () => {
+    _mount(`<el-time-picker
+        v-model="value"
+        ref="input"
+      />`, () => ({ value: new Date(2016, 9, 10, 18, 40) }), {
+      mounted() {
+        this.$refs.input.focus()
+      },
+    })
+    await nextTick()
+    const popperEl = document.querySelector('.el-picker__popper')
+    const attr = popperEl.getAttribute('aria-hidden')
+    expect(attr).toEqual('false')
+  })
 })
 
 describe('TimePicker(range)', () => {

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

@@ -207,7 +207,7 @@ export default defineComponent({
         valueOnOpen.value = props.modelValue
       }
     })
-    const emitChange = (val, isClear) => {
+    const emitChange = (val, isClear?: boolean) => {
       // determine user real change only
       if (isClear || !valueEquals(val, valueOnOpen.value)) {
         ctx.emit('change', val)

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

@@ -1,4 +1,4 @@
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, ref } from 'vue'
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
 import { DEFAULT_FORMATS_TIME } from './common/constant'
@@ -20,12 +20,21 @@ export default defineComponent({
   },
   emits: ['update:modelValue'],
   setup(props, ctx) {
+    const commonPicker = ref(null)
     const type = props.isRange ? 'timerange' : 'time'
     const panel = props.isRange ? TimeRangePanel : TimePickPanel
+    const refProps = {
+      ...props,
+      focus: () => {
+        commonPicker.value?.handleFocus()
+      },
+    }
+    ctx.expose(refProps)
     return () => h(Picker, {
       format: DEFAULT_FORMATS_TIME,
       ...props, // allow format to be overwrite
       type,
+      ref: commonPicker,
       'onUpdate:modelValue': value => ctx.emit('update:modelValue', value),
     },
     {