fix(epicmaxco#2894): focus element in select and counter

m0ksem · Feb 18, 2023 · 9d216d9 · 9d216d9
1 parent e333e84
commit 9d216d9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git 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,15 +616,18 @@ export default defineComponent({
     // public methods
     const focus = () => {
       if (props.disabled) { return }
-      input.value?.focus()
+      focusElement(unwrapEl(input.value))
     }
 
     const blur = () => {
       if (showDropdownContentComputed.value) {
         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
@@ -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