fix(VAutocomplete): allow searching when selected item is hightlighted

fixes #20796 closes #20836
vuetifyjs · Jan 16, 2025 · 2cab7e4 · 2cab7e4
1 parent 2cefedb
commit 2cab7e4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -229,10 +229,7 @@ export const VAutocomplete = genericComponent<new <
       const selectionStart = vTextFieldRef.value.selectionStart
       const length = model.value.length
 
-      if (
-        selectionIndex.value > -1 ||
-        ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)
-      ) {
+      if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
         e.preventDefault()
       }
 
@@ -265,13 +262,16 @@ export const VAutocomplete = genericComponent<new <
         ) return select(model.value[0], false)
 
         if (~selectionIndex.value) {
+          e.preventDefault()
           const originalSelectionIndex = selectionIndex.value
           select(model.value[selectionIndex.value], false)
 
           selectionIndex.value = originalSelectionIndex >= length - 1 ? (length - 2) : originalSelectionIndex
         } else if (e.key === 'Backspace' && !search.value) {
           selectionIndex.value = length - 1
         }
+
+        return
       }
 
       if (!props.multiple) return
@@ -289,9 +289,7 @@ export const VAutocomplete = genericComponent<new <
           selectionIndex.value = -1
           vTextFieldRef.value.setSelectionRange(search.value?.length, search.value?.length)
         }
-      }
-
-      if (e.key === 'ArrowRight') {
+      } else if (e.key === 'ArrowRight') {
         if (selectionIndex.value < 0) return
 
         const next = selectionIndex.value + 1
@@ -302,6 +300,8 @@ export const VAutocomplete = genericComponent<new <
           selectionIndex.value = -1
           vTextFieldRef.value.setSelectionRange(0, 0)
         }
+      } else if (~selectionIndex.value && checkPrintable(e)) {
+        selectionIndex.value = -1
       }
     }
 

diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -281,10 +281,7 @@ export const VCombobox = genericComponent<new <
       const selectionStart = vTextFieldRef.value.selectionStart
       const length = model.value.length
 
-      if (
-        selectionIndex.value > -1 ||
-        ['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)
-      ) {
+      if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
         e.preventDefault()
       }
 
@@ -326,13 +323,16 @@ export const VCombobox = genericComponent<new <
         ) return select(model.value[0], false)
 
         if (~selectionIndex.value) {
+          e.preventDefault()
           const originalSelectionIndex = selectionIndex.value
           select(model.value[selectionIndex.value], false)
 
           selectionIndex.value = originalSelectionIndex >= length - 1 ? (length - 2) : originalSelectionIndex
         } else if (e.key === 'Backspace' && !search.value) {
           selectionIndex.value = length - 1
         }
+
+        return
       }
 
       if (!props.multiple) return
@@ -350,9 +350,7 @@ export const VCombobox = genericComponent<new <
           selectionIndex.value = -1
           vTextFieldRef.value.setSelectionRange(search.value.length, search.value.length)
         }
-      }
-
-      if (e.key === 'ArrowRight') {
+      } else if (e.key === 'ArrowRight') {
         if (selectionIndex.value < 0) return
 
         const next = selectionIndex.value + 1
@@ -363,6 +361,8 @@ export const VCombobox = genericComponent<new <
           selectionIndex.value = -1
           vTextFieldRef.value.setSelectionRange(0, 0)
         }
+      } else if (~selectionIndex.value && checkPrintable(e)) {
+        selectionIndex.value = -1
       }
     }
     function onAfterEnter () {