fix(VAutocomplete): allow searching when menu is focused

fixes #17641
vuetifyjs · Jul 25, 2024 · b9ed79d · b9ed79d
1 parent 6397324
commit b9ed79d
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 13 deletions.
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -27,6 +27,7 @@ import { makeTransitionProps } from '@/composables/transition'
 // Utilities
 import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue'
 import {
+  checkPrintable,
   ensureValidVNode,
   genericComponent,
   IN_BROWSER,
@@ -195,7 +196,7 @@ export const VAutocomplete = genericComponent<new <
     ))
 
     const listRef = ref<VList>()
-    const { onListScroll, onListKeydown } = useScrolling(listRef, vTextFieldRef)
+    const listEvents = useScrolling(listRef, vTextFieldRef)
     function onClear (e: MouseEvent) {
       if (props.openOnClear) {
         menu.value = true
@@ -217,6 +218,11 @@ export const VAutocomplete = genericComponent<new <
       }
       menu.value = !menu.value
     }
+    function onListKeydown (e: KeyboardEvent) {
+      if (checkPrintable(e)) {
+        vTextFieldRef.value?.focus()
+      }
+    }
     function onKeydown (e: KeyboardEvent) {
       if (props.readonly || form?.isReadonly.value) return
 
@@ -472,10 +478,10 @@ export const VAutocomplete = genericComponent<new <
                       onKeydown={ onListKeydown }
                       onFocusin={ onFocusin }
                       onFocusout={ onFocusout }
-                      onScrollPassive={ onListScroll }
                       tabindex="-1"
                       aria-live="polite"
                       color={ props.itemColor ?? props.color }
+                      { ...listEvents }
                       { ...props.listProps }
                     >
                       { slots['prepend-item']?.() }

diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -28,6 +28,7 @@ import { makeTransitionProps } from '@/composables/transition'
 // Utilities
 import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue'
 import {
+  checkPrintable,
   ensureValidVNode,
   genericComponent,
   IN_BROWSER,
@@ -246,7 +247,7 @@ export const VCombobox = genericComponent<new <
     ))
 
     const listRef = ref<VList>()
-    const { onListScroll, onListKeydown } = useScrolling(listRef, vTextFieldRef)
+    const listEvents = useScrolling(listRef, vTextFieldRef)
     function onClear (e: MouseEvent) {
       cleared = true
 
@@ -268,6 +269,11 @@ export const VCombobox = genericComponent<new <
       }
       menu.value = !menu.value
     }
+    function onListKeydown (e: KeyboardEvent) {
+      if (checkPrintable(e)) {
+        vTextFieldRef.value?.focus()
+      }
+    }
     // eslint-disable-next-line complexity
     function onKeydown (e: KeyboardEvent) {
       if (isComposingIgnoreKey(e) || props.readonly || form?.isReadonly.value) return
@@ -516,10 +522,10 @@ export const VCombobox = genericComponent<new <
                       onKeydown={ onListKeydown }
                       onFocusin={ onFocusin }
                       onFocusout={ onFocusout }
-                      onScrollPassive={ onListScroll }
                       tabindex="-1"
                       aria-live="polite"
                       color={ props.itemColor ?? props.color }
+                      { ...listEvents }
                       { ...props.listProps }
                     >
                       { slots['prepend-item']?.() }

diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -26,6 +26,7 @@ import { makeTransitionProps } from '@/composables/transition'
 // Utilities
 import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue'
 import {
+  checkPrintable,
   ensureValidVNode,
   genericComponent,
   IN_BROWSER,
@@ -197,7 +198,7 @@ export const VSelect = genericComponent<new <
     })
 
     const listRef = ref<VList>()
-    const { onListScroll, onListKeydown } = useScrolling(listRef, vTextFieldRef)
+    const listEvents = useScrolling(listRef, vTextFieldRef)
     function onClear (e: MouseEvent) {
       if (props.openOnClear) {
         menu.value = true
@@ -208,6 +209,11 @@ export const VSelect = genericComponent<new <
 
       menu.value = !menu.value
     }
+    function onListKeydown (e: KeyboardEvent) {
+      if (checkPrintable(e)) {
+        onKeydown(e)
+      }
+    }
     function onKeydown (e: KeyboardEvent) {
       if (!e.key || props.readonly || form?.isReadonly.value) return
 
@@ -232,12 +238,6 @@ export const VSelect = genericComponent<new <
       // html select hotkeys
       const KEYBOARD_LOOKUP_THRESHOLD = 1000 // milliseconds
 
-      function checkPrintable (e: KeyboardEvent) {
-        const isPrintableChar = e.key.length === 1
-        const noModifier = !e.ctrlKey && !e.metaKey && !e.altKey
-        return isPrintableChar && noModifier
-      }
-
       if (props.multiple || !checkPrintable(e)) return
 
       const now = performance.now()
@@ -399,10 +399,10 @@ export const VSelect = genericComponent<new <
                       onMousedown={ (e: MouseEvent) => e.preventDefault() }
                       onKeydown={ onListKeydown }
                       onFocusin={ onFocusin }
-                      onScrollPassive={ onListScroll }
                       tabindex="-1"
                       aria-live="polite"
                       color={ props.itemColor ?? props.color }
+                      { ...listEvents }
                       { ...props.listProps }
                     >
                       { slots['prepend-item']?.() }

diff --git a/packages/vuetify/src/components/VSelect/useScrolling.ts b/packages/vuetify/src/components/VSelect/useScrolling.ts
@@ -70,5 +70,8 @@ export function useScrolling (listRef: Ref<VList | undefined>, textFieldRef: Ref
     }
   }
 
-  return { onListScroll, onListKeydown }
+  return {
+    onScrollPassive: onListScroll,
+    onKeydown: onListKeydown,
+  } as Record<string, Function> // typescript doesn't know about vue's event merging
 }
diff --git a/packages/vuetify/src/util/helpers.ts b/packages/vuetify/src/util/helpers.ts
@@ -760,3 +760,9 @@ export function templateRef () {
 
   return fn as TemplateRef
 }
+
+export function checkPrintable (e: KeyboardEvent) {
+  const isPrintableChar = e.key.length === 1
+  const noModifier = !e.ctrlKey && !e.metaKey && !e.altKey
+  return isPrintableChar && noModifier
+}