fix(inputs): add missing update:focused events (#16852)

Co-authored-by: John Leider <[email protected]>
vuetifyjs · Apr 19, 2023 · 42c0b4d · 42c0b4d
1 parent 28a1763
commit 42c0b4d
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 7 deletions.
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -98,6 +98,7 @@ export const VAutocomplete = genericComponent<new <
   },
 
   emits: {
+    'update:focused': (focused: boolean) => true,
     'update:search': (val: any) => true,
     'update:modelValue': (val: any) => true,
     'update:menu': (val: boolean) => true,

diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -99,6 +99,7 @@ export const VCombobox = genericComponent<new <
   },
 
   emits: {
+    'update:focused': (focused: boolean) => true,
     'update:modelValue': (val: any) => true,
     'update:search': (val: string) => true,
     'update:menu': (val: boolean) => true,

diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.tsx b/packages/vuetify/src/components/VFileInput/VFileInput.tsx
@@ -10,6 +10,7 @@ import { VField } from '@/components/VField'
 
 // Composables
 import { forwardRefs } from '@/composables/forwardRefs'
+import { useFocus } from '@/composables/focus'
 import { useLocale } from '@/composables/locale'
 import { useProxiedModel } from '@/composables/proxiedModel'
 
@@ -78,12 +79,14 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
   emits: {
     'click:control': (e: MouseEvent) => true,
     'mousedown:control': (e: MouseEvent) => true,
+    'update:focused': (focused: boolean) => true,
     'update:modelValue': (files: File[]) => true,
   },
 
   setup (props, { attrs, emit, slots }) {
     const { t } = useLocale()
     const model = useProxiedModel(props, 'modelValue')
+    const { isFocused, focus, blur } = useFocus(props)
     const base = computed(() => typeof props.showSize !== 'boolean' ? props.showSize : undefined)
     const totalBytes = computed(() => (model.value ?? []).reduce((bytes, { size = 0 }) => bytes + size, 0))
     const totalBytesReadable = computed(() => humanReadableFileSize(totalBytes.value, base.value))
@@ -103,16 +106,13 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
     })
     const vInputRef = ref<VInput>()
     const vFieldRef = ref<VInput>()
-    const isFocused = ref(false)
     const inputRef = ref<HTMLInputElement>()
     function onFocus () {
       if (inputRef.value !== document.activeElement) {
         inputRef.value?.focus()
       }
 
-      if (!isFocused.value) {
-        isFocused.value = true
-      }
+      if (!isFocused.value) focus()
     }
     function onClickPrepend (e: MouseEvent) {
       onControlClick(e)
@@ -212,7 +212,7 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
                           model.value = [...target.files ?? []]
                         }}
                         onFocus={ onFocus }
-                        onBlur={ () => (isFocused.value = false) }
+                        onBlur={ blur }
                         { ...slotProps }
                         { ...inputAttrs }
                       />

diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -104,6 +104,7 @@ export const VSelect = genericComponent<new <
   },
 
   emits: {
+    'update:focused': (focused: boolean) => true,
     'update:modelValue': (val: any) => true,
     'update:menu': (val: boolean) => true,
   },
@@ -405,6 +406,7 @@ export const VSelect = genericComponent<new <
     })
 
     return forwardRefs({
+      isFocused,
       menu,
       select,
     }, vTextFieldRef)

diff --git a/packages/vuetify/src/composables/focus.ts b/packages/vuetify/src/composables/focus.ts
@@ -3,17 +3,18 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
 import { computed } from 'vue'
-import { getCurrentInstanceName, propsFactory } from '@/util'
+import { EventProp, getCurrentInstanceName, propsFactory } from '@/util'
 
 // Types
 export interface FocusProps {
   focused: boolean
-  'onUpdate:focused': ((val: boolean) => void) | undefined
+  'onUpdate:focused': ((focused: boolean) => any) | undefined
 }
 
 // Composables
 export const makeFocusProps = propsFactory({
   focused: Boolean,
+  'onUpdate:focused': EventProp<[FocusEvent]>(),
 }, 'focus')
 
 export function useFocus (