Skip to content

fix(VCombobox): placeholder visibility for empty string value #22022

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

fix(VCombobox): placeholder visibility for empty string value #22022

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ca3430f
fix: vcombobox empty string initial value not showing placeholder
jcjp Sep 12, 2025
38cae09
chore: add unit test for new functionality
jcjp Sep 13, 2025
e62bf0b
fix: incorrect isDirty check and unit test
jcjp Sep 13, 2025
fb9d9d4
chore: simplify test
J-Sek Sep 13, 2025
d39fd22
chore: avoid random test failures (equivalent assertion)
J-Sek Sep 13, 2025
c5e4bcc
perf: single loop
KaelWD Sep 16, 2025
19c15c2
chore(VCombobox): simplify transformIn
jcjp Sep 24, 2025
1d34431
chore: make emptyValues parameter as optional
jcjp Sep 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/vuetify/src/components/VCombobox/VCombobox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,13 +133,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)),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this change necessary? Combobox only works with returnObject so modelValue=null will never match any item unless they're doing something weird with the slots.

Copy link
Contributor Author

@jcjp jcjp Sep 20, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are right, after careful investigation, it seems to be not needed. During my investigation it seems that the emptyValues are not properly set on final render thus the placeholder not being shown properly will further investigate this thanks! EDIT: I updated the code and the fix seems to be working fine.

v => transformIn(v === null ? [null] : wrapInArray(v, emptyValues.value)),
v => {
const transformed = transformOut(v)
return props.multiple ? transformed : (transformed[0] ?? null)
Expand Down
14 changes: 14 additions & 0 deletions packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.browser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,6 +380,20 @@ describe('VCombobox', () => {
id: 'item2',
}])
})

it('should show placeholder if initial value is empty string', () => {
const emptyString = ref('')

const { getByPlaceholderText } = render(() => (
<VCombobox
v-model={ emptyString.value }
items={['a', 'b', 'c']}
placeholder="select something"
/>
))

expect(getByPlaceholderText('select something')).toBeVisible()
})
})

describe('readonly', () => {
Expand Down
4 changes: 3 additions & 1 deletion packages/vuetify/src/composables/list-items.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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[]>([])
Expand Down Expand Up @@ -204,5 +206,5 @@ export function useItems (props: ItemProps) {
: value.map(({ value }) => value)
}

return { items, transformIn, transformOut }
return { items, transformIn, transformOut, emptyValues }
}
5 changes: 3 additions & 2 deletions packages/vuetify/src/util/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down