prevent pointerdown on items

huntabyte · Jul 19, 2024 · 311552d · 311552d
1 parent a54bbe7
commit 311552d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/packages/bits-ui/src/lib/bits/combobox/combobox.svelte.ts b/packages/bits-ui/src/lib/bits/combobox/combobox.svelte.ts
@@ -522,6 +522,11 @@ class ComboboxItemState {
 		highlighted: this.isHighlighted,
 	}));
 
+	#onpointerdown = (e: PointerEvent) => {
+		// prevent focus from leaving the combobox
+		e.preventDefault();
+	};
+
 	/**
 	 * Using `pointerup` instead of `click` allows power users to pointerdown
 	 * the trigger, then release pointerup on an item to select it vs having to do
@@ -560,6 +565,7 @@ class ComboboxItemState {
 				"data-label": this.label.value,
 				[COMBOBOX_ITEM_ATTR]: "",
 				onpointermove: this.#onpointermove,
+				onpointerdown: this.#onpointerdown,
 				onpointerleave: this.#onpointerleave,
 				onpointerup: this.#onpointerup,
 			}) as const

diff --git a/sites/docs/src/lib/components/demos/combobox-demo.svelte b/sites/docs/src/lib/components/demos/combobox-demo.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <Combobox.Root
-	type="single"
+	type="multiple"
 	name="favoriteFruit"
 	onOpenChange={(o) => {
 		if (!o) inputValue = "";