fix(Checkbox): ensure Checkbox.Group value setter is called (#1440)

Author: huntabyte

.changeset/silly-months-play.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix(Checkbox): ensure Checkbox.Group value setter is called

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

@@ -37,17 +37,19 @@ class CheckboxGroupState {
 	addValue(checkboxValue: string | undefined) {
 		if (!checkboxValue) return;
 		if (!this.opts.value.current.includes(checkboxValue)) {
-			this.opts.value.current.push(checkboxValue);
-			this.opts.onValueChange.current(this.opts.value.current);
+			const newValue = [...$state.snapshot(this.opts.value.current), checkboxValue];
+			this.opts.value.current = newValue;
+			this.opts.onValueChange.current(newValue);
 		}
 	}
 
 	removeValue(checkboxValue: string | undefined) {
 		if (!checkboxValue) return;
 		const index = this.opts.value.current.indexOf(checkboxValue);
 		if (index === -1) return;
-		this.opts.value.current.splice(index, 1);
-		this.opts.onValueChange.current(this.opts.value.current);
+		const newValue = this.opts.value.current.filter((v) => v !== checkboxValue);
+		this.opts.value.current = newValue;
+		this.opts.onValueChange.current(newValue);
 	}
 
 	props = $derived.by(

packages/bits-ui/src/lib/bits/checkbox/components/checkbox-group.svelte

@@ -28,9 +28,9 @@
 		required: box.with(() => Boolean(required)),
 		name: box.with(() => name),
 		value: box.with(
-			() => value,
+			() => $state.snapshot(value),
 			(v) => {
-				value = v;
+				value = $state.snapshot(v);
 				onValueChange(v);
 			}
 		),

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

@@ -4,6 +4,7 @@
 	import { CheckboxGroupContext, useCheckboxRoot } from "../checkbox.svelte.js";
 	import CheckboxInput from "./checkbox-input.svelte";
 	import { useId } from "$lib/internal/use-id.js";
+	import { watch } from "runed";
 
 	let {
 		checked = $bindable(false),
@@ -32,6 +33,19 @@
 		}
 	}
 
+	watch.pre(
+		() => value,
+		() => {
+			if (group && value) {
+				if (group.opts.value.current.includes(value)) {
+					checked = true;
+				} else {
+					checked = false;
+				}
+			}
+		}
+	);
+
 	const rootState = useCheckboxRoot(
 		{
 			checked: box.with(

tests/src/tests/checkbox/checkbox-group-test.svelte

@@ -2,10 +2,12 @@
 	import { Checkbox } from "bits-ui";
 
 	let {
-		value = $bindable([]),
+		value: valueProp = $bindable([]),
 		items = [],
 		disabledItems = [],
 		onFormSubmit,
+		getValue: getValueProp,
+		setValue: setValueProp,
 		...restProps
 	}: Checkbox.GroupProps & {
 		/**
@@ -14,7 +16,11 @@
 		items?: string[];
 		disabledItems?: string[];
 		onFormSubmit?: (fd: FormData) => void;
+		setValue?: (value: string[]) => void;
+		getValue?: () => string[];
 	} = $props();
+
+	let myValue = $state(valueProp);
 </script>
 
 {#snippet MyCheckbox({ itemValue }: { itemValue: string })}
@@ -44,14 +50,29 @@
 			onFormSubmit?.(formData);
 		}}
 	>
-		<p data-testid="binding">{value}</p>
-		<Checkbox.Group data-testid="group" bind:value {...restProps}>
+		<p data-testid="binding">{myValue}</p>
+		<Checkbox.Group
+			data-testid="group"
+			bind:value={
+				() => {
+					getValueProp?.();
+					return myValue;
+				},
+				(v) => {
+					setValueProp?.(v);
+					myValue = v;
+				}
+			}
+			{...restProps}
+		>
 			<Checkbox.GroupLabel data-testid="group-label">My Group</Checkbox.GroupLabel>
 			{#each items as itemValue}
 				{@render MyCheckbox({ itemValue })}
 			{/each}
 		</Checkbox.Group>
 		<button type="submit" data-testid="submit"> Submit </button>
 	</form>
-	<button data-testid="update" onclick={() => (value = ["c", "d"])}> Programmatic update </button>
+	<button data-testid="update" onclick={() => (myValue = ["c", "d"])}>
+		Programmatic update
+	</button>
 </main>

tests/src/tests/checkbox/checkbox.test.ts

@@ -256,9 +256,28 @@ describe("Checkbox Group", () => {
 			expect(t.binding).toHaveTextContent("b,d");
 		});
 
+		it("should handle function binding", async () => {
+			const setMock = vi.fn();
+			const getMock = vi.fn();
+			const t = setupGroup({ getValue: getMock, setValue: setMock, value: [] });
+			const [a, b, _, d] = t.checkboxes;
+			await t.user.click(a);
+			expect(setMock).toHaveBeenCalledWith(["a"]);
+			setMock.mockClear();
+			await t.user.click(b);
+			expect(setMock).toHaveBeenCalledWith(["a", "b"]);
+			setMock.mockClear();
+			await t.user.click(d);
+			expect(setMock).toHaveBeenCalledWith(["a", "b", "d"]);
+			setMock.mockClear();
+			await t.user.click(a);
+			expect(setMock).toHaveBeenCalledWith(["b", "d"]);
+		});
+
 		it("should handle programmatic value changes", async () => {
 			const t = setupGroup({ value: ["a", "b"] });
 			const [a, b, c, d] = t.checkboxes;
+			await tick();
 			expectChecked(a, b);
 			await t.user.click(t.updateBtn);
 			expectUnchecked(a, b);