fix(Listbox): emit change on uncontrolled deselect

playgrounds/nuxt/app/pages/index.vue

@@ -1,12 +1,23 @@
+<script setup lang="ts">
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
+
+const items = [{ label: 'Account', icon: 'i-lucide-user' }, { label: 'Password', icon: 'i-lucide-lock' }]
+const iconItems = [{ label: 'System', icon: 'i-lucide-monitor' }, { label: 'Light', icon: 'i-lucide-sun' }, { label: 'Dark', icon: 'i-lucide-moon' }]
+</script>
+
 <template>
   <UDashboardNavbar class="absolute top-0 inset-x-0 lg:border-b-0" />
 
-  <div class="text-center space-y-4">
-    <h1 class="text-2xl font-bold text-primary">
-      Playground
-    </h1>
-    <p class="max-w-sm mx-auto text-muted">
-      Explore and test all Nuxt UI components in an interactive environment.
-    </p>
+  <div class="flex flex-col gap-6 p-8">
+    <div v-for="size in sizes" :key="size" class="flex items-start gap-2">
+      <span class="w-6 text-xs/8 text-muted ">{{ size }}</span>
+
+      <UButton :size="size" label="Button" variant="soft" color="neutral" icon="i-lucide-plus" />
+      <UTabs :size="size" :items="items" :content="false" />
+      <UButton :size="size" icon="i-lucide-plus" square color="neutral" variant="outline" />
+      <UTabs :size="size" :items="iconItems" :content="false" square :ui="{ label: 'sr-only' }" />
+      <UColorModeTabs :size="size" />
+      <UTabs :size="size" :items="items" :content="false" variant="link" />
+    </div>
   </div>
 </template>

src/runtime/components/Listbox.vue

@@ -248,7 +248,8 @@ const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.listbox || {}) }
 }))
 
 function onUpdate(value: any) {
-  if (toRaw(props.modelValue) === value) {
+  // An uncontrolled deselect emits `undefined` too, so only skip unchanged controlled values.
+  if (props.modelValue !== undefined && toRaw(props.modelValue) === value) {
     return
   }
 

test/components/Listbox.spec.ts

@@ -124,6 +124,14 @@ describe('Listbox', () => {
       await input.setValue(items[0])
       expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
     })
+
+    test('change event on uncontrolled deselect', async () => {
+      const wrapper = mount(Listbox, { props: { items, valueKey: 'value', defaultValue: 'FR' } })
+      await wrapper.findAll('[role="option"]')[0]!.trigger('click')
+
+      expect(wrapper.emitted('update:modelValue')).toEqual([[undefined]])
+      expect(wrapper.emitted('change')).toHaveLength(1)
+    })
   })
 
   describe('form integration', async () => {