From 4f6cac42529d39764896765e4cc6ff23fda820b3 Mon Sep 17 00:00:00 2001
From: msidolphin <msidolphin@outlook.com>
Date: Sat, 11 Dec 2021 06:56:40 +0800
Subject: [PATCH] fix: [el-date-picker] focus input box when focus method is
 called (#4343)

fix #4327
---
 docs/en-US/component/date-picker.md           |  6 +++---
 .../components/date-picker/src/date-picker.ts |  4 ++--
 .../time-picker/src/common/picker.vue         | 20 ++++++++++++++++++-
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/docs/en-US/component/date-picker.md b/docs/en-US/component/date-picker.md
index d556576981..e8a674bac5 100644
--- a/docs/en-US/component/date-picker.md
+++ b/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
 
diff --git a/packages/components/date-picker/src/date-picker.ts b/packages/components/date-picker/src/date-picker.ts
index 7c184a195c..c8e163b831 100644
--- a/packages/components/date-picker/src/date-picker.ts
+++ b/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)
diff --git a/packages/components/time-picker/src/common/picker.vue b/packages/components/time-picker/src/common/picker.vue
index 98836dad59..cf5c628617 100644
--- a/packages/components/time-picker/src/common/picker.vue
+++ b/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,
     }
   },
 })