Add null as a valid type for Listbox and Combobox in Vue (#2064)

* add `null` as a valid type for Listbox and Combobox in Vue * update changelog
tailwindlabs · Dec 5, 2022 · 9ef269e · 9ef269e
1 parent 219901c
commit 9ef269e
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 2 deletions.
diff --git a/packages/@headlessui-react/src/components/listbox/listbox.test.tsx b/packages/@headlessui-react/src/components/listbox/listbox.test.tsx
@@ -456,6 +456,30 @@ describe('Rendering', () => {
         })
       )
     })
+
+    it(
+      'null should be a valid value for the Listbox',
+      suppressConsoleLogs(async () => {
+        render(
+          <Listbox value={null} onChange={console.log}>
+            <Listbox.Button>Trigger</Listbox.Button>
+            <Listbox.Options>
+              <Listbox.Option value="a">Option A</Listbox.Option>
+              <Listbox.Option value="b">Option B</Listbox.Option>
+              <Listbox.Option value="c">Option C</Listbox.Option>
+            </Listbox.Options>
+          </Listbox>
+        )
+
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
+        assertListbox({ state: ListboxState.InvisibleUnmounted })
+
+        await click(getListboxButton())
+
+        assertListboxButton({ state: ListboxState.Visible })
+        assertListbox({ state: ListboxState.Visible })
+      })
+    )
   })
 
   describe('Listbox.Label', () => {

diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve syncing of the `ComboboxInput` value ([#2042](https://github.com/tailwindlabs/headlessui/pull/2042))
 - Fix crash when using `multiple` mode without `value` prop (uncontrolled) for `Listbox` and `Combobox` components ([#2058](https://github.com/tailwindlabs/headlessui/pull/2058))
 - Allow passing in your own `id` prop ([#2060](https://github.com/tailwindlabs/headlessui/pull/2060))
+- Add `null` as a valid type for Listbox and Combobox in Vue ([#2064](https://github.com/tailwindlabs/headlessui/pull/2064))
 
 ## [1.7.4] - 2022-11-03
 

diff --git a/packages/@headlessui-vue/src/components/combobox/combobox.ts b/packages/@headlessui-vue/src/components/combobox/combobox.ts
@@ -118,7 +118,12 @@ export let Combobox = defineComponent({
     as: { type: [Object, String], default: 'template' },
     disabled: { type: [Boolean], default: false },
     by: { type: [String, Function], default: () => defaultComparator },
-    modelValue: { type: [Object, String, Number, Boolean], default: undefined },
+    modelValue: {
+      type: [Object, String, Number, Boolean] as PropType<
+        object | string | number | boolean | null
+      >,
+      default: undefined,
+    },
     defaultValue: { type: [Object, String, Number, Boolean], default: undefined },
     name: { type: String },
     nullable: { type: Boolean, default: false },

diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.test.tsx b/packages/@headlessui-vue/src/components/listbox/listbox.test.tsx
@@ -495,6 +495,33 @@ describe('Rendering', () => {
         })
       )
     })
+
+    it(
+      'null should be a valid value for the Listbox',
+      suppressConsoleLogs(async () => {
+        renderTemplate({
+          template: html`
+            <Listbox v-model="value" by="id">
+              <ListboxButton>Trigger</ListboxButton>
+              <ListboxOptions>
+                <ListboxOption :value="{ id: 1, name: 'alice' }">alice</ListboxOption>
+                <ListboxOption :value="{ id: 2, name: 'bob' }">bob</ListboxOption>
+                <ListboxOption :value="{ id: 3, name: 'charlie' }">charlie</ListboxOption>
+              </ListboxOptions>
+            </Listbox>
+          `,
+          setup: () => ({ value: null }),
+        })
+
+        assertListboxButton({ state: ListboxState.InvisibleUnmounted })
+        assertListbox({ state: ListboxState.InvisibleUnmounted })
+
+        await click(getListboxButton())
+
+        assertListboxButton({ state: ListboxState.Visible })
+        assertListbox({ state: ListboxState.Visible })
+      })
+    )
   })
 
   describe('ListboxLabel', () => {

diff --git a/packages/@headlessui-vue/src/components/listbox/listbox.ts b/packages/@headlessui-vue/src/components/listbox/listbox.ts
@@ -18,6 +18,7 @@ import {
   InjectionKey,
   Ref,
   UnwrapNestedRefs,
+  PropType,
 } from 'vue'
 
 import { Features, render, omit, compact } from '../../utils/render'
@@ -119,7 +120,12 @@ export let Listbox = defineComponent({
     disabled: { type: [Boolean], default: false },
     by: { type: [String, Function], default: () => defaultComparator },
     horizontal: { type: [Boolean], default: false },
-    modelValue: { type: [Object, String, Number, Boolean], default: undefined },
+    modelValue: {
+      type: [Object, String, Number, Boolean] as PropType<
+        object | string | number | boolean | null
+      >,
+      default: undefined,
+    },
     defaultValue: { type: [Object, String, Number, Boolean], default: undefined },
     name: { type: String, optional: true },
     multiple: { type: [Boolean], default: false },