From 9d216d9a008d1e18080c27a16ac1dc283d2a6b4d Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Sat, 18 Feb 2023 17:55:34 +0200
Subject: [PATCH] fix(#2894): focus element in select and counter

---
 packages/ui/src/components/va-select/VaSelect.vue | 9 +++++++--
 packages/ui/src/composables/useFocus.ts           | 8 ++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/va-select/VaSelect.vue b/packages/ui/src/components/va-select/VaSelect.vue
index 4f5ffece76..dfbf3173b6 100644
--- a/packages/ui/src/components/va-select/VaSelect.vue
+++ b/packages/ui/src/components/va-select/VaSelect.vue
@@ -154,6 +154,8 @@ import { useAutocomplete, useAutocompleteProps } from './hooks/useAutocomplete'
 
 import type { SelectOption, Placement } from './types'
 import type { DropdownOffsetProp } from '../va-dropdown/types'
+import { blurElement, focusElement } from '../../utils/focus'
+import { unwrapEl } from '../../utils/unwrapEl'
 
 const VaDropdownProps = extractComponentProps(VaDropdown,
   ['keyboardNavigation', 'offset', 'stateful', 'keepAnchorWidth', 'closeOnContentClick', 'innerAnchorSelector', 'modelValue'],
@@ -614,7 +616,7 @@ export default defineComponent({
     // public methods
     const focus = () => {
       if (props.disabled) { return }
-      input.value?.focus()
+      focusElement(unwrapEl(input.value))
     }
 
     const blur = () => {
@@ -622,7 +624,10 @@ export default defineComponent({
         showDropdownContentComputed.value = false
       }
 
-      nextTick(input.value?.blur)
+      nextTick(() => {
+        if (props.disabled) { return }
+        blurElement(unwrapEl(input.value))
+      })
     }
 
     const reset = () => withoutValidation(() => {
diff --git a/packages/ui/src/composables/useFocus.ts b/packages/ui/src/composables/useFocus.ts
index 2fe2adea0e..40a1176f0e 100644
--- a/packages/ui/src/composables/useFocus.ts
+++ b/packages/ui/src/composables/useFocus.ts
@@ -1,3 +1,5 @@
+import { unwrapEl } from './../utils/unwrapEl'
+import { focusElement, blurElement } from './../utils/focus'
 import { ref, onMounted, onBeforeUnmount, Ref } from 'vue'
 
 export const useFocusEmits = ['focus', 'blur']
@@ -19,11 +21,13 @@ export function useFocus (
   }
 
   const focus = (): void => {
-    el?.value?.focus()
+    if (!el?.value) { return }
+    focusElement(unwrapEl(el?.value))
   }
 
   const blur = (): void => {
-    el?.value?.blur()
+    if (!el?.value) { return }
+    blurElement(unwrapEl(el?.value))
   }
 
   let element: any