fix(VSelects): recognize empty string as no value

Author: J-Sek

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

@@ -148,14 +148,14 @@ export const VAutocomplete = genericComponent<new <
     const selectionIndex = shallowRef(-1)
     const color = computed(() => vTextFieldRef.value?.color)
     const label = computed(() => menu.value ? props.closeText : props.openText)
-    const { items, transformIn, transformOut } = useItems(props)
+    const { items, transformIn, transformOut, emptyValues } = useItems(props)
     const { textColorClasses, textColorStyles } = useTextColor(color)
     const search = useProxiedModel(props, 'search', '')
     const model = useProxiedModel(
       props,
       'modelValue',
       [],
-      v => transformIn(v === null ? [null] : wrapInArray(v)),
+      v => transformIn(v === null ? [null] : wrapInArray(v, emptyValues)),
       v => {
         const transformed = transformOut(v)
         return props.multiple ? transformed : (transformed[0] ?? null)
@@ -385,7 +385,7 @@ export const VAutocomplete = genericComponent<new <
       } else {
         if (!props.multiple && search.value == null) model.value = []
         menu.value = false
-        if (!model.value.some(({ title }) => title === search.value)) search.value = ''
+        search.value = ''
         selectionIndex.value = -1
       }
     })

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

@@ -159,7 +159,7 @@ export const VCombobox = genericComponent<new <
       props,
       'modelValue',
       [],
-      v => transformIn(wrapInArray(v)),
+      v => transformIn(wrapInArray(v, [''])),
       v => {
         const transformed = transformOut(v)
         return props.multiple ? transformed : (transformed[0] ?? null)

packages/vuetify/src/components/VSelect/VSelect.tsx

@@ -151,12 +151,12 @@ export const VSelect = genericComponent<new <
         _menu.value = v
       },
     })
-    const { items, transformIn, transformOut } = useItems(props)
+    const { items, transformIn, transformOut, emptyValues } = useItems(props)
     const model = useProxiedModel(
       props,
       'modelValue',
       [],
-      v => transformIn(v === null ? [null] : wrapInArray(v)),
+      v => transformIn(v === null ? [null] : wrapInArray(v, emptyValues)),
       v => {
         const transformed = transformOut(v)
         return props.multiple ? transformed : (transformed[0] ?? null)

packages/vuetify/src/composables/list-items.ts

@@ -120,5 +120,8 @@ export function useItems (props: ItemProps) {
       : value.map(({ value }) => value)
   }
 
-  return { items, transformIn, transformOut }
+  const emptyValues = ['', null, undefined]
+    .filter(v => !items.value.some(item => item.value === v))
+
+  return { items, transformIn, transformOut, emptyValues }
 }

packages/vuetify/src/util/helpers.ts

@@ -389,11 +389,12 @@ export function arrayDiff (a: any[], b: any[]): any[] {
 
 type IfAny<T, Y, N> = 0 extends (1 & T) ? Y : N;
 export function wrapInArray<T> (
-  v: T | null | undefined
+  v: T | null | undefined,
+  emptyValues: any[] = []
 ): T extends readonly any[]
     ? IfAny<T, T[], T>
     : NonNullable<T>[] {
-  return v == null
+  return v == null || emptyValues.includes(v)
     ? []
     : Array.isArray(v)
       ? v as any : [v]