fix(select): Fix select.focus is undefined bug (#862)

* fix(select): Fix select.focus is undefined bug

* fix(select): Add hook test

Co-authored-by: bastarder <jie.qian@blockheaders.com>

packages/hooks/__tests__/use-focus.spec.ts

@@ -0,0 +1,17 @@
+import { ref } from 'vue'
+import useFocus from '../use-focus'
+
+describe('useFocus', () => {
+  it('should focus el', async () => {
+    const inputEl = document.createElement('input')
+    document.body.appendChild(inputEl)
+
+    const reference = ref(inputEl)
+    const { focus } = useFocus(reference)
+
+    focus()
+
+    expect(document.activeElement).toBe(inputEl)
+  })
+})
+

packages/hooks/index.ts

@@ -4,3 +4,4 @@ export { default as useLockScreen } from './use-lockscreen'
 export { default as useRestoreActive } from './use-restore-active'
 export { default as useModal } from './use-modal'
 export { default as useMigrating } from './use-migrating'
+export { default as useFocus } from './use-focus'

packages/hooks/use-focus/index.ts

@@ -0,0 +1,9 @@
+import { Ref } from 'vue'
+
+export default (el: Ref<HTMLElement>) => {
+  return {
+    focus: () => {
+      el.value?.focus?.()
+    },
+  }
+}

packages/select/src/select.vue

@@ -185,6 +185,7 @@ import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'
 import { isValidComponentSize } from '@element-plus/utils/validators'
 import { useSelect, useSelectStates } from './useSelect'
 import { selectKey } from './token'
+import { useFocus } from '@element-plus/hooks'
 
 import type { PropType } from 'vue'
 
@@ -301,6 +302,8 @@ export default defineComponent({
       scrollbar,
     } = useSelect(props, states, ctx)
 
+    const { focus } = useFocus(reference)
+
     const {
       inputWidth,
       selected,
@@ -422,6 +425,7 @@ export default defineComponent({
       getValueKey,
       navigateOptions,
       dropMenuVisible,
+      focus,
 
       reference,
       input,