fix: radio item label not selecting

.changeset/hot-dolphins-check.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: issue causing labels associated with radio group items not to select the item

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

@@ -1,4 +1,5 @@
 import { srOnlyStyles, styleToString, useRefById } from "svelte-toolbelt";
+import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from "svelte/elements";
 import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
 import type { WithRefProps } from "$lib/internal/types.js";
 import { getAriaChecked, getAriaRequired, getDataDisabled } from "$lib/internal/attrs.js";
@@ -117,26 +118,17 @@ class RadioGroupItemState {
 		});
 	}
 
-	#onpointerdown = (e: PointerEvent) => {
+	#onclick: MouseEventHandler<HTMLButtonElement> = (e) => {
 		if (this.#disabled.current) return;
-		if (e.pointerType === "touch") return e.preventDefault();
 		this.#root.setValue(this.#value.current);
 	};
 
-	#onpointerup = (e: PointerEvent) => {
-		if (this.#disabled.current) return;
-		if (e.pointerType === "touch") {
-			e.preventDefault();
-			this.#root.setValue(this.#value.current);
-		}
-	};
-
-	#onfocus = () => {
+	#onfocus: FocusEventHandler<HTMLButtonElement> = () => {
 		if (!this.#root.hasValue) return;
 		this.#root.setValue(this.#value.current);
 	};
 
-	#onkeydown = (e: KeyboardEvent) => {
+	#onkeydown: KeyboardEventHandler<HTMLButtonElement> = (e) => {
 		if (this.#isDisabled) return;
 		if (e.key === kbd.SPACE) {
 			e.preventDefault();
@@ -165,10 +157,9 @@ class RadioGroupItemState {
 				role: "radio",
 				tabindex: this.#tabIndex,
 				//
-				onpointerdown: this.#onpointerdown,
-				onpointerup: this.#onpointerup,
 				onkeydown: this.#onkeydown,
 				onfocus: this.#onfocus,
+				onclick: this.#onclick,
 			}) as const
 	);
 }

packages/tests/src/tests/radio-group/radio-group-test.svelte

@@ -20,12 +20,15 @@
 <main>
 	<RadioGroup.Root data-testid="root" bind:value {...restProps}>
 		{#each items as { value, disabled }}
-			<RadioGroup.Item {value} {disabled} data-testid="{value}-item">
+			<RadioGroup.Item id={value} {value} {disabled} data-testid="{value}-item">
 				{#snippet children({ checked })}
 					<span data-testid="{value}-indicator"> {checked} </span>
 					{value}
 				{/snippet}
 			</RadioGroup.Item>
+			<label for={value} data-testid="{value}-label">
+				Label for {value}
+			</label>
 		{/each}
 	</RadioGroup.Root>
 	<button

packages/tests/src/tests/radio-group/radio-group.test.ts

@@ -28,6 +28,7 @@ const testItems: Item[] = [
 ];
 
 const itemIds = testItems.map((item) => `${item.value}-item`);
+const labelIds = testItems.map((item) => `${item.value}-label`);
 const indicatorIds = testItems.map((item) => `${item.value}-indicator`);
 
 function setup(props: Partial<RadioGroupTestProps> = {}, items: Item[] = testItems) {
@@ -237,4 +238,18 @@ describe("radio group", () => {
 		expect(aItem).toHaveFocus();
 		expect(input).toHaveValue("a");
 	});
+
+	it("should change the value when a label associated with an item is clicked", async () => {
+		const { getByTestId, user } = setup();
+
+		for (const indicator of indicatorIds) {
+			expect(getByTestId(indicator)).toHaveTextContent("false");
+		}
+		const itemIdx = randItem();
+
+		const label = getByTestId(labelIds[itemIdx] as string);
+
+		await user.click(label);
+		expect(getByTestId(indicatorIds[itemIdx] as string)).toHaveTextContent("true");
+	});
 });

sites/docs/package.json

@@ -7,7 +7,7 @@
 	"scripts": {
 		"dev": "concurrently \"pnpm:dev:content\" \"pnpm:dev:svelte\" \"pnpm:replace:velite\"",
 		"dev:content": "velite dev --watch",
-		"dev:svelte": "vite dev --host",
+		"dev:svelte": "vite dev",
 		"build": "velite && node ./other/update-velite-output.js && pnpm build:search && vite build",
 		"replace:velite": "node ./other/watch-velite-output.js",
 		"build:content": "velite",