fix: correct even in useFocusableControl (#4484)

epicmaxco · Feb 25, 2025 · f6c342a · f6c342a
1 parent 8d87159
commit f6c342a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git a/packages/ui/src/components/va-input/VaInput.vue b/packages/ui/src/components/va-input/VaInput.vue
@@ -69,13 +69,12 @@ import type { AnyStringPropType } from '../../utils/types/prop-type'
 import { VaInputWrapper } from '../va-input-wrapper'
 import { VaIcon } from '../va-icon'
 import { combineFunctions } from '../../utils/combine-functions'
-import { omit } from '../../utils/omit'
 import { pick } from '../../utils/pick'
 
 const VaInputWrapperProps = extractComponentProps(VaInputWrapper)
 
 const { createEmits: createInputEmits, createListeners: createInputListeners } = useEmitProxy(
-  ['change', 'keyup', 'keypress', 'keydown', 'focus', 'blur', 'input'],
+  ['change', 'keyup', 'keypress', 'keydown', 'input'],
 )
 
 const { createEmits: createFieldEmits, createListeners: createFieldListeners } = useEmitProxy([
@@ -178,7 +177,7 @@ const inputListeners = createInputListeners(emit)
 
 const inputEvents = {
   ...inputListeners,
-  onBlur: combineFunctions(onBlur, inputListeners.onBlur),
+  onBlur,
 }
 
 const setInputValue = (newValue: string) => {

diff --git a/packages/ui/src/composables/fabrics/useFocusableControl.ts b/packages/ui/src/composables/fabrics/useFocusableControl.ts
@@ -15,9 +15,16 @@ export const useFocusableControl = (
     autofocus: boolean,
     disabled?: boolean,
   },
-  emit: (event: (typeof useFocusableControlEmits)[number]) => void,
+  emit: (event: (typeof useFocusableControlEmits)[number], e: FocusEvent) => void,
 ) => {
-  const isFocused = useElementFocused(el)
+  const isFocused = useElementFocused(el, {
+    onBlur (e) {
+      emit('blur', e)
+    },
+    onFocus (e) {
+      emit('focus', e)
+    },
+  })
 
   const focus = () => {
     if (props.disabled) { return }
@@ -37,14 +44,6 @@ export const useFocusableControl = (
     }
   })
 
-  watch(isFocused, (value) => {
-    if (value) {
-      emit('focus')
-    } else {
-      emit('blur')
-    }
-  })
-
   return {
     focus,
     blur,

diff --git a/packages/ui/src/composables/std/browser/useElementFocused.ts b/packages/ui/src/composables/std/browser/useElementFocused.ts
@@ -4,15 +4,23 @@ import { focusElement, blurElement } from '../../../utils/focus'
 import { unwrapEl } from '../../../utils/unwrapEl'
 import { TemplateRef } from '../../../utils/types/template-ref'
 
-export const useElementFocused = (el: Ref<TemplateRef>) => {
+export const useElementFocused = (
+  el: Ref<TemplateRef>,
+  options: {
+    onFocus?: (e: FocusEvent) => void,
+    onBlur?: (e: FocusEvent) => void
+  } = {},
+) => {
   const isFocused = ref(false)
 
-  useEvent('focus', () => {
+  useEvent('focus', (e) => {
     isFocused.value = true
+    options.onFocus?.(e)
   }, el)
 
-  useEvent('blur', () => {
+  useEvent('blur', (e) => {
     isFocused.value = false
+    options.onBlur?.(e)
   }, el)
 
   return computed({