fix(VAutocomplete, VCombobox): skip subheader for auto-select-first

Author: J-Sek

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

@@ -1,3 +1,4 @@
+/* eslint-disable complexity */
 // Styles
 import './VAutocomplete.sass'
 
@@ -170,6 +171,12 @@ export const VAutocomplete = genericComponent<new <
         !listHasFocus.value
     })
 
+    const firstSelectableItem = computed(() => {
+      return highlightFirst.value
+        ? displayItems.value.find(x => x.type === 'item' && !x.props.disabled)
+        : null
+    })
+
     const menuDisabled = computed(() => (
       (props.hideNoData && !displayItems.value.length) ||
       form.isReadonly.value || form.isDisabled.value
@@ -235,9 +242,10 @@ export const VAutocomplete = genericComponent<new <
       if (
         highlightFirst.value &&
         ['Enter', 'Tab'].includes(e.key) &&
-        !model.value.some(({ value }) => value === displayItems.value[0].value)
+        firstSelectableItem.value &&
+        !model.value.some(({ value }) => value === firstSelectableItem.value!.value)
       ) {
-        select(displayItems.value[0])
+        select(firstSelectableItem.value)
       }
 
       if (e.key === 'ArrowDown' && highlightFirst.value) {
@@ -503,7 +511,7 @@ export const VAutocomplete = genericComponent<new <
                           const itemProps = mergeProps(item.props, {
                             ref: itemRef,
                             key: item.value,
-                            active: (highlightFirst.value && index === 0) ? true : undefined,
+                            active: (highlightFirst.value && item.value === firstSelectableItem.value?.value) ? true : undefined,
                             onClick: () => select(item, null),
                           })
 

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

@@ -242,6 +242,12 @@ export const VCombobox = genericComponent<new <
         !listHasFocus.value
     })
 
+    const firstSelectableItem = computed(() => {
+      return highlightFirst.value
+        ? displayItems.value.find(x => x.type === 'item' && !x.props.disabled)
+        : null
+    })
+
     const listRef = ref<VList>()
     const listEvents = useScrolling(listRef, vTextFieldRef)
     function onClear (e: MouseEvent) {
@@ -292,9 +298,10 @@ export const VCombobox = genericComponent<new <
 
       if (highlightFirst.value &&
         ['Enter', 'Tab'].includes(e.key) &&
-        !model.value.some(({ value }) => value === displayItems.value[0].value)
+        firstSelectableItem.value &&
+        !model.value.some(({ value }) => value === firstSelectableItem.value!.value)
       ) {
-        select(filteredItems.value[0])
+        select(firstSelectableItem.value)
       }
 
       if (e.key === 'ArrowDown' && highlightFirst.value) {
@@ -566,7 +573,7 @@ export const VCombobox = genericComponent<new <
                           const itemProps = mergeProps(item.props, {
                             ref: itemRef,
                             key: item.value,
-                            active: (highlightFirst.value && index === 0) ? true : undefined,
+                            active: (highlightFirst.value && item.value === firstSelectableItem.value?.value) ? true : undefined,
                             onClick: () => select(item, null),
                           })