next: gracefully handle deselect on single listbox/combobox (#713)

.changeset/serious-shrimps-pump.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+Listbox/Combobox: gracefully handle deselect when `type="single"` 

packages/bits-ui/src/lib/bits/listbox/components/listbox.svelte

@@ -31,8 +31,6 @@
 		}
 	}
 
-	value === undefined && (value = type === "single" ? "" : []);
-
 	useListboxRoot({
 		type,
 		value: box.with(

packages/bits-ui/src/lib/bits/listbox/listbox.svelte.ts

@@ -800,8 +800,10 @@ class ListboxItemState {
 		// prevent any default behavior
 		e.preventDefault();
 		if (this.disabled.current) return;
+		const isCurrentSelectedValue = this.value.current === this.root.value.current;
 		this.root.toggleItem(this.value.current, this.label.current);
-		if (!this.root.isMulti) {
+
+		if (!this.root.isMulti && !isCurrentSelectedValue) {
 			this.root.closeMenu();
 		}
 	};

packages/bits-ui/src/tests/listbox/listbox.test.ts

@@ -416,6 +416,19 @@ describe("listbox - single", () => {
 		const content = getByTestId("content");
 		expect(content).toBeVisible();
 	});
+
+	it("should deselect the selected item when the user clicks on the selected item", async () => {
+		const { getByTestId, user, trigger } = await openSingle();
+		const [item0] = getItems(getByTestId);
+		await user.click(item0!);
+		expectSelected(item0!);
+		await user.click(trigger);
+
+		const [item0v2] = getItems(getByTestId);
+
+		await user.click(item0v2!);
+		expectNotSelected(item0v2!);
+	});
 });
 
 ////////////////////////////////////