diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index d103ab91f..456689fd5 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Fixed + +- Fix regression where `displayValue` crashes ([#2087](https://github.com/tailwindlabs/headlessui/pull/2087)) ## [1.7.5] - 2022-12-08 diff --git a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx index e3be24ce2..9c5561d89 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.test.tsx +++ b/packages/@headlessui-react/src/components/combobox/combobox.test.tsx @@ -412,6 +412,30 @@ describe('Rendering', () => { }) ) }) + + it( + 'should not crash when a defaultValue is not given', + suppressConsoleLogs(async () => { + let data = [ + { id: 1, name: 'alice', label: 'Alice' }, + { id: 2, name: 'bob', label: 'Bob' }, + { id: 3, name: 'charlie', label: 'Charlie' }, + ] + + render( + + value.name} /> + + {data.map((person) => ( + + {person.label} + + ))} + + + ) + }) + ) }) describe('Combobox.Input', () => { diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx index 594b95604..ba8479320 100644 --- a/packages/@headlessui-react/src/components/combobox/combobox.tsx +++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx @@ -705,7 +705,7 @@ let Input = forwardRefWithAs(function Input< // you don't have to use this at all, a more common UI is a "tag" based UI, which you can render // yourself using the selected option(s). let currentValue = useMemo(() => { - if (typeof displayValue === 'function') { + if (typeof displayValue === 'function' && data.value !== undefined) { return displayValue(data.value as unknown as TType) ?? '' } else if (typeof data.value === 'string') { return data.value @@ -909,7 +909,9 @@ let Input = forwardRefWithAs(function Input< 'aria-labelledby': labelledby, defaultValue: props.defaultValue ?? - displayValue?.(data.defaultValue as unknown as TType) ?? + (data.defaultValue !== undefined + ? displayValue?.(data.defaultValue as unknown as TType) + : null) ?? data.defaultValue, disabled: data.disabled, onCompositionStart: handleCompositionStart, diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md index 405297c0d..ecd90681c 100644 --- a/packages/@headlessui-vue/CHANGELOG.md +++ b/packages/@headlessui-vue/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Fixed + +- Fix regression where `displayValue` crashes ([#2087](https://github.com/tailwindlabs/headlessui/pull/2087)) ## [1.7.5] - 2022-12-08 diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.test.ts b/packages/@headlessui-vue/src/components/combobox/combobox.test.ts index 4c608887d..1af8cdc24 100644 --- a/packages/@headlessui-vue/src/components/combobox/combobox.test.ts +++ b/packages/@headlessui-vue/src/components/combobox/combobox.test.ts @@ -465,6 +465,31 @@ describe('Rendering', () => { }) ) }) + + it( + 'should not crash when a defaultValue is not given', + suppressConsoleLogs(async () => { + let data = [ + { id: 1, name: 'alice', label: 'Alice' }, + { id: 2, name: 'bob', label: 'Bob' }, + { id: 3, name: 'charlie', label: 'Charlie' }, + ] + + renderTemplate({ + template: html` + + + + + {{ person.label }} + + + + `, + setup: () => ({ data }), + }) + }) + ) }) describe('ComboboxInput', () => { diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts index b7c8d17d9..ac9cc2f62 100644 --- a/packages/@headlessui-vue/src/components/combobox/combobox.ts +++ b/packages/@headlessui-vue/src/components/combobox/combobox.ts @@ -676,7 +676,7 @@ export let ComboboxInput = defineComponent({ let value = api.value.value if (!dom(api.inputRef)) return '' - if (typeof props.displayValue !== 'undefined') { + if (typeof props.displayValue !== 'undefined' && value !== undefined) { return props.displayValue(value as unknown) ?? '' } else if (typeof value === 'string') { return value @@ -874,7 +874,9 @@ export let ComboboxInput = defineComponent({ let defaultValue = computed(() => { return ( props.defaultValue ?? - props.displayValue?.(api.defaultValue.value) ?? + (api.defaultValue.value !== undefined + ? props.displayValue?.(api.defaultValue.value) + : null) ?? api.defaultValue.value ?? '' )