From 7a9ea27975cffefa350471c34925e83fd738814a Mon Sep 17 00:00:00 2001
From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>
Date: Sat, 26 Oct 2024 13:49:28 -0400
Subject: [PATCH] next: fix command click event handling (#816)

---
 .changeset/lovely-bags-allow.md                  |  5 +++++
 .../src/lib/bits/command/command.svelte.ts       | 16 +++-------------
 2 files changed, 8 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/lovely-bags-allow.md

diff --git a/.changeset/lovely-bags-allow.md b/.changeset/lovely-bags-allow.md
new file mode 100644
index 000000000..9acf193e7
--- /dev/null
+++ b/.changeset/lovely-bags-allow.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: command click events
diff --git a/packages/bits-ui/src/lib/bits/command/command.svelte.ts b/packages/bits-ui/src/lib/bits/command/command.svelte.ts
index 59e5bfc3e..141647124 100644
--- a/packages/bits-ui/src/lib/bits/command/command.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/command/command.svelte.ts
@@ -298,7 +298,7 @@ class CommandRootState {
 			const grandparent = item.parentElement?.parentElement;
 			if (!grandparent) return;
 			const firstChildOfParent = getFirstNonCommentChild(grandparent) as HTMLElement | null;
-			if (firstChildOfParent && firstChildOfParent.dataset.value === item.dataset.value) {
+			if (firstChildOfParent && firstChildOfParent.dataset?.value === item.dataset?.value) {
 				item
 					?.closest(GROUP_SELECTOR)
 					?.querySelector(GROUP_HEADING_SELECTOR)
@@ -877,20 +877,11 @@ class CommandItemState {
 		this.#select();
 	};
 
-	#onpointerdown = (e: PointerEvent) => {
+	#onclick = () => {
 		if (this.#disabled.current) return;
-		if (e.pointerType === "touch" || e.button !== 0) return e.preventDefault();
 		this.#onSelect();
 	};
 
-	#onpointerup = (e: PointerEvent) => {
-		if (this.#disabled.current) return;
-		if (e.pointerType === "touch") {
-			e.preventDefault();
-			this.#onSelect();
-		}
-	};
-
 	props = $derived.by(
 		() =>
 			({
@@ -901,9 +892,8 @@ class CommandItemState {
 				"data-selected": getDataSelected(this.isSelected),
 				[ITEM_ATTR]: "",
 				role: "option",
-				onpointerdown: this.#onpointerdown,
 				onpointermove: this.#onpointermove,
-				onpointerup: this.#onpointerup,
+				onclick: this.#onclick,
 			}) as const
 	);
 }