next: improve radio item selection (#927)

Author: huntabyte

.changeset/wild-dogs-attend.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: don't auto select first radio item unless there is already a selected value

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

@@ -8,6 +8,7 @@ import {
 	useRovingFocus,
 } from "$lib/internal/use-roving-focus.svelte.js";
 import { createContext } from "$lib/internal/create-context.js";
+import { kbd } from "$lib/internal/kbd.js";
 
 const RADIO_GROUP_ROOT_ATTR = "data-radio-group-root";
 const RADIO_GROUP_ITEM_ATTR = "data-radio-group-item";
@@ -32,6 +33,7 @@ class RadioGroupRootState {
 	name: RadioGroupRootStateProps["name"];
 	value: RadioGroupRootStateProps["value"];
 	rovingFocusGroup: UseRovingFocusReturn;
+	hasValue = $derived.by(() => this.value.current !== "");
 
 	constructor(props: RadioGroupRootStateProps) {
 		this.#id = props.id;
@@ -42,6 +44,7 @@ class RadioGroupRootState {
 		this.name = props.name;
 		this.value = props.value;
 		this.#ref = props.ref;
+
 		this.rovingFocusGroup = useRovingFocus({
 			rootNodeId: this.#id,
 			candidateAttr: RADIO_GROUP_ITEM_ATTR,
@@ -129,10 +132,17 @@ class RadioGroupItemState {
 	};
 
 	#onfocus = () => {
+		if (!this.#root.hasValue) return;
 		this.#root.setValue(this.#value.current);
 	};
 
 	#onkeydown = (e: KeyboardEvent) => {
+		if (this.#isDisabled) return;
+		if (e.key === kbd.SPACE) {
+			e.preventDefault();
+			this.#root.setValue(this.#value.current);
+			return;
+		}
 		this.#root.rovingFocusGroup.handleKeydown(this.#ref.current, e, true);
 	};
 

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

@@ -91,19 +91,19 @@ describe("radio group", () => {
 		const item2 = getByTestId(itemIds[2] as string);
 		const item3 = getByTestId(itemIds[3] as string);
 		item0.focus();
-		await waitFor(() => expect(item0).toHaveFocus());
+		expect(item0).toHaveFocus();
 		await user.keyboard(kbd.ARROW_DOWN);
-		await waitFor(() => expect(item1).toHaveFocus());
+		expect(item1).toHaveFocus();
 		await user.keyboard(kbd.ARROW_DOWN);
-		await waitFor(() => expect(item2).toHaveFocus());
+		expect(item2).toHaveFocus();
 		await user.keyboard(kbd.ARROW_DOWN);
-		await waitFor(() => expect(item3).toHaveFocus());
+		expect(item3).toHaveFocus();
 		await user.keyboard(kbd.ARROW_UP);
-		await waitFor(() => expect(item2).toHaveFocus());
+		expect(item2).toHaveFocus();
 		await user.keyboard(kbd.ARROW_UP);
-		await waitFor(() => expect(item1).toHaveFocus());
+		expect(item1).toHaveFocus();
 		await user.keyboard(kbd.ARROW_UP);
-		await waitFor(() => expect(item0).toHaveFocus());
+		expect(item0).toHaveFocus();
 	});
 
 	it("should navigate through the items using the keyboard (left and right)", async () => {
@@ -114,19 +114,19 @@ describe("radio group", () => {
 		const item2 = getByTestId(itemIds[2] as string);
 		const item3 = getByTestId(itemIds[3] as string);
 		item0.focus();
-		await waitFor(() => expect(item0).toHaveFocus());
+		expect(item0).toHaveFocus();
 		await user.keyboard(kbd.ARROW_RIGHT);
-		await waitFor(() => expect(item1).toHaveFocus());
+		expect(item1).toHaveFocus();
 		await user.keyboard(kbd.ARROW_RIGHT);
-		await waitFor(() => expect(item2).toHaveFocus());
+		expect(item2).toHaveFocus();
 		await user.keyboard(kbd.ARROW_RIGHT);
-		await waitFor(() => expect(item3).toHaveFocus());
+		expect(item3).toHaveFocus();
 		await user.keyboard(kbd.ARROW_LEFT);
-		await waitFor(() => expect(item2).toHaveFocus());
+		expect(item2).toHaveFocus();
 		await user.keyboard(kbd.ARROW_LEFT);
-		await waitFor(() => expect(item1).toHaveFocus());
+		expect(item1).toHaveFocus();
 		await user.keyboard(kbd.ARROW_LEFT);
-		await waitFor(() => expect(item0).toHaveFocus());
+		expect(item0).toHaveFocus();
 	});
 
 	it("should respect the loop prop", async () => {
@@ -137,14 +137,14 @@ describe("radio group", () => {
 		const item0 = getByTestId(itemIds[0] as string);
 		const item3 = getByTestId(itemIds[3] as string);
 		item0.focus();
-		await waitFor(() => expect(item0).toHaveFocus());
+		expect(item0).toHaveFocus();
 		await user.keyboard(kbd.ARROW_UP);
-		await waitFor(() => expect(item0).toHaveFocus());
+		expect(item0).toHaveFocus();
 
 		item3.focus();
-		await waitFor(() => expect(item3).toHaveFocus());
+		expect(item3).toHaveFocus();
 		await user.keyboard(kbd.ARROW_DOWN);
-		await waitFor(() => expect(item3).toHaveFocus());
+		expect(item3).toHaveFocus();
 	});
 
 	it("should respect the value prop & binding", async () => {
@@ -170,14 +170,14 @@ describe("radio group", () => {
 		const item0 = getByTestId(itemIds[0] as string);
 		const item3 = getByTestId(itemIds[3] as string);
 		item0.focus();
-		await waitFor(() => expect(item0).toHaveFocus());
+		expect(item0).toHaveFocus();
 		await user.keyboard(kbd.ARROW_LEFT);
-		await waitFor(() => expect(item0).toHaveFocus());
+		expect(item0).toHaveFocus();
 
 		item3.focus();
-		await waitFor(() => expect(item3).toHaveFocus());
+		expect(item3).toHaveFocus();
 		await user.keyboard(kbd.ARROW_RIGHT);
-		await waitFor(() => expect(item3).toHaveFocus());
+		expect(item3).toHaveFocus();
 	});
 
 	it("should not render an input if the `name` prop isn't passed", async () => {
@@ -220,4 +220,21 @@ describe("radio group", () => {
 
 		expect(input).toHaveAttribute("disabled");
 	});
+
+	it("should not automatically select the first item focused when the radio group does not have a value", async () => {
+		const { getByTestId, user, input } = setup({ name: "radio-group" });
+
+		const aItem = getByTestId("a-item");
+		aItem.focus();
+		expect(input).toHaveValue("");
+		await user.keyboard(kbd.ARROW_DOWN);
+		expect(input).toHaveValue("");
+		const bItem = getByTestId("b-item");
+		expect(bItem).toHaveFocus();
+		await user.keyboard(kbd.SPACE);
+		expect(input).toHaveValue("b");
+		await user.keyboard(kbd.ARROW_UP);
+		expect(aItem).toHaveFocus();
+		expect(input).toHaveValue("a");
+	});
 });