diff --git a/.changeset/hot-dolphins-check.md b/.changeset/hot-dolphins-check.md new file mode 100644 index 000000000..ef658ae25 --- /dev/null +++ b/.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 diff --git a/packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts b/packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts index 1d746b864..ae0465aac 100644 --- a/packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts +++ b/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 = (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 = () => { if (!this.#root.hasValue) return; this.#root.setValue(this.#value.current); }; - #onkeydown = (e: KeyboardEvent) => { + #onkeydown: KeyboardEventHandler = (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 ); } diff --git a/packages/tests/src/tests/radio-group/radio-group-test.svelte b/packages/tests/src/tests/radio-group/radio-group-test.svelte index 1274c2346..9aef8c4ce 100644 --- a/packages/tests/src/tests/radio-group/radio-group-test.svelte +++ b/packages/tests/src/tests/radio-group/radio-group-test.svelte @@ -20,12 +20,15 @@
{#each items as { value, disabled }} - + {#snippet children({ checked })} {checked} {value} {/snippet} + {/each}