fix(VAutocomplete/VCombobox): allow delete in single mode (#19387)

fixes #19369

Co-authored-by: John Leider <john@vuetifyjs.com>

packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx

@@ -246,9 +246,13 @@ export const VAutocomplete = genericComponent<new <
         listRef.value?.focus('next')
       }
 
-      if (!props.multiple) return
-
       if (['Backspace', 'Delete'].includes(e.key)) {
+        if (
+          !props.multiple &&
+          hasSelectionSlot.value &&
+          model.value.length > 0
+        ) return select(model.value[0], false)
+
         if (selectionIndex.value < 0) {
           if (e.key === 'Backspace' && !search.value) {
             selectionIndex.value = length - 1
@@ -258,12 +262,13 @@ export const VAutocomplete = genericComponent<new <
         }
 
         const originalSelectionIndex = selectionIndex.value
-        const selectedItem = model.value[selectionIndex.value]
-        if (selectedItem && !selectedItem.props.disabled) select(selectedItem, false)
+        select(model.value[selectionIndex.value], false)
 
         selectionIndex.value = originalSelectionIndex >= length - 1 ? (length - 2) : originalSelectionIndex
       }
 
+      if (!props.multiple) return
+
       if (e.key === 'ArrowLeft') {
         if (selectionIndex.value < 0 && selectionStart > 0) return
 
@@ -325,8 +330,8 @@ export const VAutocomplete = genericComponent<new <
     const isSelecting = shallowRef(false)
 
     /** @param set - null means toggle */
-    function select (item: ListItem, set: boolean | null = true) {
-      if (item.props.disabled) return
+    function select (item: ListItem | undefined, set: boolean | null = true) {
+      if (!item || item.props.disabled) return
 
       if (props.multiple) {
         const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value))

packages/vuetify/src/components/VCombobox/VCombobox.tsx

@@ -268,6 +268,7 @@ export const VCombobox = genericComponent<new <
       }
       menu.value = !menu.value
     }
+    // eslint-disable-next-line complexity
     function onKeydown (e: KeyboardEvent) {
       if (isComposingIgnoreKey(e) || props.readonly || form?.isReadonly.value) return
 
@@ -306,24 +307,28 @@ export const VCombobox = genericComponent<new <
         if (hasSelectionSlot.value) _search.value = ''
       }
 
-      if (!props.multiple) return
-
       if (['Backspace', 'Delete'].includes(e.key)) {
+        if (
+          !props.multiple &&
+          hasSelectionSlot.value &&
+          model.value.length > 0
+        ) return select(model.value[0], false)
+
         if (selectionIndex.value < 0) {
           if (e.key === 'Backspace' && !search.value) {
             selectionIndex.value = length - 1
           }
-
           return
         }
 
         const originalSelectionIndex = selectionIndex.value
-        const selectedItem = model.value[selectionIndex.value]
-        if (selectedItem && !selectedItem.props.disabled) select(selectedItem, false)
+        select(model.value[selectionIndex.value], false)
 
         selectionIndex.value = originalSelectionIndex >= length - 1 ? (length - 2) : originalSelectionIndex
       }
 
+      if (!props.multiple) return
+
       if (e.key === 'ArrowLeft') {
         if (selectionIndex.value < 0 && selectionStart > 0) return
 
@@ -359,8 +364,8 @@ export const VCombobox = genericComponent<new <
       }
     }
     /** @param set - null means toggle */
-    function select (item: ListItem, set: boolean | null = true) {
-      if (item.props.disabled) return
+    function select (item: ListItem | undefined, set: boolean | null = true) {
+      if (!item || item.props.disabled) return
 
       if (props.multiple) {
         const index = model.value.findIndex(selection => props.valueComparator(selection.value, item.value))