fix: vcombobox empty string initial value not showing placeholder

Author: jcjp

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

@@ -132,13 +132,13 @@ export const VCombobox = genericComponent<new <
     const vVirtualScrollRef = ref<VVirtualScroll>()
     const selectionIndex = shallowRef(-1)
     let cleared = false
-    const { items, transformIn, transformOut } = useItems(props)
+    const { items, transformIn, transformOut, emptyValues } = useItems(props)
     const { textColorClasses, textColorStyles } = useTextColor(() => vTextFieldRef.value?.color)
     const model = useProxiedModel(
       props,
       'modelValue',
       [],
-      v => transformIn(wrapInArray(v)),
+      v => transformIn(v === null ? [null] : wrapInArray(v, emptyValues.value)),
       v => {
         const transformed = transformOut(v)
         return props.multiple ? transformed : (transformed[0] ?? null)
@@ -477,7 +477,8 @@ export const VCombobox = genericComponent<new <
         slots['append-item'] ||
         slots['no-data']
       )
-      const isDirty = model.value.length > 0
+      const isEmptyString = model.value.length === 1 && model.value[0].value === ''
+      const isDirty = model.value.length > 0 && !isEmptyString
       const textFieldProps = VTextField.filterProps(props)
 
       return (

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

@@ -123,6 +123,8 @@ export function transformItems (
 export function useItems (props: ItemProps) {
   const items = computed(() => transformItems(props, props.items))
   const hasNullItem = computed(() => items.value.some(item => item.value === null))
+  const allValues = computed(() => items.value.map(item => item.value))
+  const emptyValues = computed(() => ['', null, undefined].filter(v => !allValues.value.includes(v)))
 
   const itemsMap = shallowRef<Map<Primitive, ListItem[]>>(new Map())
   const keylessItems = shallowRef<ListItem[]>([])
@@ -204,5 +206,5 @@ export function useItems (props: ItemProps) {
       : value.map(({ value }) => value)
   }
 
-  return { items, transformIn, transformOut }
+  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)
     ? [] as any
     : Array.isArray(v)
       ? v as any : [v] as any