fix: [el-date-picker] focus input box when focus method is called (#4343)

fix #4327

docs/en-US/component/date-picker.md

@@ -217,9 +217,9 @@ Note, date time locale (month name, first day of the week ...) are also configur
 
 ## Methods
 
-| Method | Description               | Parameters |
-| ------ | ------------------------- | ---------- |
-| focus  | focus the Input component | —          |
+| Method | Description               | Parameters      |
+| ------ | ------------------------- | --------------- |
+| focus  | focus the Input component | focusStartInput |
 
 ## Slots
 

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

@@ -58,8 +58,8 @@ export default defineComponent({
     const commonPicker = ref(null)
     const refProps = {
       ...props,
-      focus: () => {
-        commonPicker.value?.handleFocus()
+      focus: (focusStartInput = true) => {
+        commonPicker.value?.focus(focusStartInput)
       },
     }
     ctx.expose(refProps)

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

@@ -270,7 +270,7 @@ export default defineComponent({
         ctx.emit('update:modelValue', val ? formatValue : val, lang.value)
       }
     }
-    const refInput = computed(() => {
+    const refInput = computed<HTMLInputElement[]>(() => {
       if (refPopper.value.triggerRef) {
         const _r = isRangeInput.value
           ? refPopper.value.triggerRef
@@ -279,6 +279,12 @@ export default defineComponent({
       }
       return []
     })
+    const refStartInput = computed(() => {
+      return refInput?.value[0]
+    })
+    const refEndInput = computed(() => {
+      return refInput?.value[1]
+    })
     const setSelectionRange = (start, end, pos) => {
       const _inputs = refInput.value
       if (!_inputs.length) return
@@ -302,6 +308,17 @@ export default defineComponent({
       userInput.value = null
       emitInput(result)
     }
+
+    const focus = (focusStartInput = true) => {
+      let input = refStartInput.value
+      if (!focusStartInput && isRangeInput.value) {
+        input = refEndInput.value
+      }
+      if (input) {
+        input.focus()
+      }
+    }
+
     const handleFocus = (e) => {
       if (props.readonly || pickerDisabled.value || pickerVisible.value) return
       pickerVisible.value = true
@@ -610,6 +627,7 @@ export default defineComponent({
       pickerDisabled,
       onSetPickerOption,
       onCalendarChange,
+      focus,
     }
   },
 })