From f44211da8664c6b71b28912ccb671f3ee7ea7df9 Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Sat, 10 Jul 2021 20:46:51 +0800
Subject: [PATCH] fix(time-select): fix missing blur method (#2477)

fix #1925
---
 .../time-select/__tests__/time-select.spec.ts | 31 +++++++++++++++++--
 packages/time-select/src/time-select.vue      | 17 ++++++++--
 website/docs/en-US/time-select.md             |  6 ++--
 website/docs/es/time-select.md                |  2 +-
 website/docs/fr-FR/time-select.md             |  6 ++--
 website/docs/jp/time-select.md                |  6 ++--
 website/docs/zh-CN/time-select.md             |  4 +--
 7 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/packages/time-select/__tests__/time-select.spec.ts b/packages/time-select/__tests__/time-select.spec.ts
index 674b1add9d..aafdd84d9d 100644
--- a/packages/time-select/__tests__/time-select.spec.ts
+++ b/packages/time-select/__tests__/time-select.spec.ts
@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
 import Option from '@element-plus/option'
 import TimeSelect from '../src/time-select.vue'
+import { sleep } from '@element-plus/test-utils'
 
 const _mount = (template: string, data, otherObj?) =>
   mount(
@@ -48,7 +49,7 @@ describe('TimeSelect', () => {
   })
 
   it('set minTime', async () => {
-    const wrapper = _mount(`<el-time-select minTime='14:30' />`, () => ({}))
+    const wrapper = _mount(`<el-time-select minTime="14:30" />`, () => ({}))
     const input = wrapper.find('input')
     input.trigger('blur')
     input.trigger('focus')
@@ -59,7 +60,7 @@ describe('TimeSelect', () => {
   })
 
   it('set maxTime', async () => {
-    const wrapper = _mount(`<el-time-select maxTime='14:30' />`, () => ({}))
+    const wrapper = _mount(`<el-time-select maxTime="14:30" />`, () => ({}))
     const input = wrapper.find('input')
     input.trigger('blur')
     input.trigger('focus')
@@ -107,4 +108,30 @@ describe('TimeSelect', () => {
     expect(vm.value).toBe('11:00')
     expect(input.element.value).toBe('11:00')
   })
+
+  it('ref focus', async () => {
+    _mount(`<el-time-select ref="input" />`, () => ({}), {
+      mounted() {
+        this.$refs.input.focus()
+      },
+    })
+    await sleep(50)
+    const popperEl = document.querySelector('.el-select__popper')
+    const attr = popperEl.getAttribute('aria-hidden')
+    expect(attr).toEqual('false')
+  })
+
+  it('ref blur', async () => {
+    _mount(`<el-time-select ref="input" />`, () => ({}), {
+      async mounted() {
+        this.$refs.input.focus()
+        await nextTick()
+        this.$refs.input.blur()
+      },
+    })
+    await sleep(50)
+    const popperEl = document.querySelector('.el-select__popper')
+    const attr = popperEl.getAttribute('aria-hidden')
+    expect(attr).toEqual('true')
+  })
 })
diff --git a/packages/time-select/src/time-select.vue b/packages/time-select/src/time-select.vue
index 43cf5516b2..810252883c 100644
--- a/packages/time-select/src/time-select.vue
+++ b/packages/time-select/src/time-select.vue
@@ -1,5 +1,6 @@
 <template>
   <el-select
+    ref="select"
     :model-value="value"
     :disabled="!editable"
     :clearable="clearable"
@@ -27,13 +28,15 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
+import { defineComponent, computed, ref } from 'vue'
 import ElSelect from '@element-plus/select'
 import ElOption from '@element-plus/option'
+
 interface Time {
   hours: number
   minutes: number
 }
+
 const parseTime = (time: string): null | Time => {
   const values = (time || '').split(':')
   if (values.length >= 2) {
@@ -79,7 +82,6 @@ const nextTime = (time: string, step: string): string => {
 
 export default defineComponent({
   name: 'ElTimeSelect',
-
   components: { ElSelect, ElOption },
   model: {
     prop: 'value',
@@ -140,6 +142,7 @@ export default defineComponent({
   emits: ['change', 'blur', 'focus', 'update:modelValue'],
   setup(props) {
     // computed
+    const select = ref(null)
     const value = computed(() => props.modelValue)
     const items = computed(() => {
       const result = []
@@ -157,9 +160,19 @@ export default defineComponent({
       }
       return result
     })
+    const blur = () => {
+      select.value?.blur?.()
+    }
+    const focus = () => {
+      select.value?.focus?.()
+    }
+
     return {
+      select,
       value,
       items,
+      blur,
+      focus,
     }
   },
 })
diff --git a/website/docs/en-US/time-select.md b/website/docs/en-US/time-select.md
index 36dc995334..28940c70d9 100644
--- a/website/docs/en-US/time-select.md
+++ b/website/docs/en-US/time-select.md
@@ -69,7 +69,7 @@ If start time is picked at first, then the end time will change accordingly.
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| model-value / v-model | binding value | string | - | - |
+| model-value / v-model | binding value | string | — | — |
 | editable | whether the input is editable | boolean | — | true |
 | clearable | whether to show clear button | boolean | — | true |
 | size | size of Input | string | medium / small / mini | — |
@@ -94,5 +94,5 @@ If start time is picked at first, then the end time will change accordingly.
 ### Methods
 | Method | Description | Parameters |
 | ---- | ---- | ---- |
-| focus | focus the Input component | - |
-| blur | blur the Input component | - |
+| focus | focus the Input component | — |
+| blur | blur the Input component | — |
diff --git a/website/docs/es/time-select.md b/website/docs/es/time-select.md
index b4ef49cd3a..48517fadab 100644
--- a/website/docs/es/time-select.md
+++ b/website/docs/es/time-select.md
@@ -68,7 +68,7 @@ Si se escoge el tiempo de inicio al principio, el tiempo de finalización cambia
 ### Atributos
 | Atributo          | Descripción                              | Tipo                                     | Valores aceptados                        | Por defecto          |
 | ----------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -------------------- |
-| model-value / v-model    | valor enlazado                           | string    | -                                        | -                    |
+| model-value / v-model    | valor enlazado                           | string    | —                                        | —                    |
 | editable          | si el input puede ser editado            | boolean                                  | —                                        | true                 |
 | clearable         | si mostrar el botón de borrado           | boolean                                  | —                                        | true                 |
 | size              | tamaño del input                         | string                                   | medium / small / mini                    | —                    |
diff --git a/website/docs/fr-FR/time-select.md b/website/docs/fr-FR/time-select.md
index 2f0cd05121..5bf1a4f1fa 100644
--- a/website/docs/fr-FR/time-select.md
+++ b/website/docs/fr-FR/time-select.md
@@ -69,7 +69,7 @@ Vous pouvez définir un intervalle de temps. Si l'horaire de début est sélecti
 
 | Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| model-value / v-model | La valeur liée. | string | - | - |
+| model-value / v-model | La valeur liée. | string | — | — |
 | editable | Si le champ d'input est éditable. | boolean | — | true |
 | clearable | Si un bouton d'effacement doit être affiché. | boolean | — | true |
 | size | Taille du champ. | string | medium / small / mini | — |
@@ -96,5 +96,5 @@ Vous pouvez définir un intervalle de temps. Si l'horaire de début est sélecti
 
 | Méthode | Description | Paramètres |
 | ---- | ---- | ---- |
-| focus | Met le focus sur le composant. | - |
-| blur | Enlève le focus sur le composant. | - |
+| focus | Met le focus sur le composant. | — |
+| blur | Enlève le focus sur le composant. | — |
diff --git a/website/docs/jp/time-select.md b/website/docs/jp/time-select.md
index 0edb0ba8f3..98e177f9ef 100644
--- a/website/docs/jp/time-select.md
+++ b/website/docs/jp/time-select.md
@@ -68,7 +68,7 @@
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| model-value / v-model | バインディング値 | - | - |
+| model-value / v-model | バインディング値 | — | — |
 | editable | 入力が編集可能かどうか | boolean | — | true |
 | clearable | クリアボタンを表示するかどうか | boolean | — | true |
 | size | 入力のサイズ | string | medium / small / mini | — |
@@ -92,5 +92,5 @@
 ### 方法
 | Method | Description | Parameters |
 | ---- | ---- | ---- |
-| focus | インプットコンポーネントにフォーカス | - |
-| blur | blur the Input component | - |
+| focus | インプットコンポーネントにフォーカス | — |
+| blur | blur the Input component | — |
diff --git a/website/docs/zh-CN/time-select.md b/website/docs/zh-CN/time-select.md
index 07b67d1d87..6c1dd54807 100644
--- a/website/docs/zh-CN/time-select.md
+++ b/website/docs/zh-CN/time-select.md
@@ -93,5 +93,5 @@
 ### Methods
 | 方法名 | 说明 | 参数 |
 | ---- | ---- | ---- |
-| focus | 使 input 获取焦点 | - |
-| blur | 去掉 input 获取焦点 | - |
+| focus | 使 input 获取焦点 | — |
+| blur | 使 input 失去焦点 | — |