Fix regression where displayValue crashes

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
 

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(
+          <Combobox name="assignee" by="id">
+            <Combobox.Input displayValue={(value: { name: string }) => value.name} />
+            <Combobox.Options>
+              {data.map((person) => (
+                <Combobox.Option key={person.id} value={person}>
+                  {person.label}
+                </Combobox.Option>
+              ))}
+            </Combobox.Options>
+          </Combobox>
+        )
+      })
+    )
   })
 
   describe('Combobox.Input', () => {

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,

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
 

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`
+            <Combobox name="assignee" by="id">
+              <ComboboxInput :displayValue="(value) => value.name" />
+              <ComboboxOptions>
+                <ComboboxOption v-for="person in data" :key="person.id" :value="person">
+                  {{ person.label }}
+                </ComboboxOption>
+              <ComboboxOptions>
+            </Combobox>
+          `,
+          setup: () => ({ data }),
+        })
+      })
+    )
   })
 
   describe('ComboboxInput', () => {

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 ??
         ''
       )