fix(VSelects): recognize empty string as no value

vuetifyjs · Nov 27, 2024 · a0301e6 · a0301e6
1 parent 54e430f
commit a0301e6
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 10 deletions.
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/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.value)),
       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
       }
     })

diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/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)

diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/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.value)),
       v => {
         const transformed = transformOut(v)
         return props.multiple ? transformed : (transformed[0] ?? null)

diff --git a/packages/vuetify/src/composables/list-items.ts b/packages/vuetify/src/composables/list-items.ts
@@ -95,7 +95,8 @@ export function transformItems (props: Omit<ItemProps, 'items'>, items: ItemProp
 
 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 hasNullItem = computed(() => allValues.value.includes(null))
 
   function transformIn (value: any[]): ListItem[] {
     if (!hasNullItem.value) {
@@ -120,5 +121,7 @@ export function useItems (props: ItemProps) {
       : value.map(({ value }) => value)
   }
 
-  return { items, transformIn, transformOut }
+  const emptyValues = computed(() => ['', null, undefined].filter(v => !allValues.value.includes(v)))
+
+  return { items, transformIn, transformOut, emptyValues }
 }
diff --git a/packages/vuetify/src/util/helpers.ts b/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]