fix: various pointer/click issues

.changeset/polite-moons-glow.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: various pointer/click issues

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

@@ -60,20 +60,11 @@ class CheckboxRootState {
 		}
 	};
 
-	#onpointerdown = (e: PointerEvent) => {
+	#onclick = () => {
 		if (this.disabled.current) return;
-		if (e.pointerType === "touch" || e.button !== 0) return e.preventDefault();
 		this.#toggle();
 	};
 
-	#onpointerup = (e: PointerEvent) => {
-		if (this.disabled.current) return;
-		if (e.pointerType === "touch") {
-			e.preventDefault();
-			this.#toggle();
-		}
-	};
-
 	props = $derived.by(
 		() =>
 			({
@@ -87,8 +78,7 @@ class CheckboxRootState {
 				"data-state": getCheckboxDataState(this.checked.current),
 				[CHECKBOX_ROOT_ATTR]: "",
 				//
-				onpointerdown: this.#onpointerdown,
-				onpointerup: this.#onpointerup,
+				onclick: this.#onclick,
 				onkeydown: this.#onkeydown,
 			}) as const
 	);

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

@@ -91,9 +91,11 @@ class DialogTriggerState {
 	#onpointerdown = (e: PointerEvent) => {
 		if (this.#disabled.current) return;
 		if (e.pointerType === "touch") return e.preventDefault();
+		if (e.button > 0) return;
 		// by default, it will attempt to focus this trigger on pointerdown
 		// since this also opens the dialog we want to prevent that behavior
 		e.preventDefault();
+
 		this.#root.handleOpen();
 	};
 
@@ -159,6 +161,7 @@ class DialogCloseState {
 	#onpointerdown = (e: PointerEvent) => {
 		if (this.#disabled.current) return;
 		if (e.pointerType === "touch") return e.preventDefault();
+		if (e.button > 0) return;
 		this.#root.handleClose();
 	};
 
@@ -392,6 +395,7 @@ class AlertDialogCancelState {
 	#onpointerdown = (e: PointerEvent) => {
 		if (this.#disabled.current) return;
 		if (e.pointerType === "touch") return e.preventDefault();
+		if (e.button > 0) return;
 		this.#root.handleClose();
 	};
 

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

@@ -61,17 +61,8 @@ class SwitchRootState {
 		this.#toggle();
 	};
 
-	#onpointerup = (e: PointerEvent) => {
+	#onclick = (e: PointerEvent) => {
 		if (this.disabled.current) return;
-		if (e.pointerType === "touch") {
-			e.preventDefault();
-			this.#toggle();
-		}
-	};
-
-	#onpointerdown = (e: PointerEvent) => {
-		if (this.disabled.current) return;
-		if (e.pointerType === "touch") return e.preventDefault();
 		this.#toggle();
 	};
 
@@ -92,8 +83,7 @@ class SwitchRootState {
 				"aria-required": getAriaRequired(this.required.current),
 				[ROOT_ATTR]: "",
 				//
-				onpointerdown: this.#onpointerdown,
-				onpointerup: this.#onpointerup,
+				onclick: this.#onclick,
 				onkeydown: this.#onkeydown,
 			}) as const
 	);

packages/bits-ui/src/lib/bits/toggle-group/toggle-group.svelte.ts

@@ -176,18 +176,9 @@ class ToggleGroupItemState {
 		this.#root.toggleItem(this.#value.current, this.#id.current);
 	};
 
-	#onpointerdown = (e: PointerEvent) => {
+	#onclick = () => {
 		if (this.#isDisabled) return;
-		if (e.pointerType === "touch" || e.button !== 0) return e.preventDefault();
-		this.toggleItem();
-	};
-
-	#onpointerup = (e: PointerEvent) => {
-		if (this.#isDisabled) return;
-		if (e.pointerType === "touch") {
-			e.preventDefault();
-			this.toggleItem();
-		}
+		this.#root.toggleItem(this.#value.current, this.#id.current);
 	};
 
 	#onkeydown = (e: KeyboardEvent) => {
@@ -233,8 +224,7 @@ class ToggleGroupItemState {
 				disabled: getDisabled(this.#isDisabled),
 				[ITEM_ATTR]: "",
 				//
-				onpointerdown: this.#onpointerdown,
-				onpointerup: this.#onpointerup,
+				onclick: this.#onclick,
 				onkeydown: this.#onkeydown,
 			}) as const
 	);

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

@@ -39,24 +39,8 @@ class ToggleRootState {
 		}
 	};
 
-	#onpointerdown = (e: PointerEvent) => {
+	#onclick = () => {
 		if (this.#disabled.current) return;
-		if (e.pointerType === "touch" || e.button !== 0) return e.preventDefault();
-		this.#togglePressed();
-	};
-
-	#onpointerup = (e: PointerEvent) => {
-		if (this.#disabled.current) return;
-		if (e.pointerType === "touch") {
-			e.preventDefault();
-			this.#togglePressed();
-		}
-	};
-
-	#onkeydown = (e: KeyboardEvent) => {
-		if (this.#disabled.current) return;
-		if (![kbd.ENTER, kbd.SPACE].includes(e.key)) return;
-		e.preventDefault();
 		this.#togglePressed();
 	};
 
@@ -68,9 +52,7 @@ class ToggleRootState {
 				"aria-pressed": getAriaPressed(this.pressed.current),
 				"data-state": getToggleDataState(this.pressed.current),
 				disabled: getDisabled(this.#disabled.current),
-				onpointerdown: this.#onpointerdown,
-				onpointerup: this.#onpointerup,
-				onkeydown: this.#onkeydown,
+				onclick: this.#onclick,
 			}) as const
 	);
 }