fix(Menu): only call onValueChange once for checkbox group value change

.changeset/twelve-hats-fly.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix(Menu): only call onValueChange once per change to CheckboxGroup value

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

@@ -50,6 +50,7 @@ import { DOMTypeahead } from "$lib/internal/dom-typeahead.svelte.js";
 import { RovingFocusGroup } from "$lib/internal/roving-focus-group.js";
 import { GraceArea } from "$lib/internal/grace-area.svelte.js";
 import { PresenceManager } from "$lib/internal/presence-manager.svelte.js";
+import { arraysAreEqual } from "$lib/internal/arrays.js";
 
 export const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
 export const CONTEXT_MENU_CONTENT_ATTR = "data-context-menu-content";
@@ -1269,6 +1270,7 @@ export class MenuCheckboxGroupState {
 		if (!this.opts.value.current.includes(checkboxValue)) {
 			const newValue = [...$state.snapshot(this.opts.value.current), checkboxValue];
 			this.opts.value.current = newValue;
+			if (arraysAreEqual(this.opts.value.current, newValue)) return;
 			this.opts.onValueChange.current(newValue);
 		}
 	}
@@ -1279,6 +1281,7 @@ export class MenuCheckboxGroupState {
 		if (index === -1) return;
 		const newValue = this.opts.value.current.filter((v) => v !== checkboxValue);
 		this.opts.value.current = newValue;
+		if (arraysAreEqual(this.opts.value.current, newValue)) return;
 		this.opts.onValueChange.current(newValue);
 	}
 

tests/src/tests/dropdown-menu/dropdown-menu.browser.test.ts

@@ -447,6 +447,28 @@ it("calls `onValueChange` when the value of the checkbox group changes", async (
 	expect(onValueChange).toHaveBeenCalledWith(["1"]);
 });
 
+it("should only call `onValueChange` once when the value of the checkbox group changes", async () => {
+	const onValueChange = vi.fn();
+	const t = await open({
+		checkboxGroupProps: {
+			onValueChange,
+		},
+	});
+	await t.getByTestId("checkbox-group-item-1").click();
+	expect(onValueChange).toHaveBeenCalledExactlyOnceWith(["1"]);
+	onValueChange.mockClear();
+
+	// re-open the menu since we can't pass `closeOnSelect` to CheckboxItem
+	await t.open();
+	await t.getByTestId("checkbox-group-item-2").click();
+	expect(onValueChange).toHaveBeenCalledExactlyOnceWith(["1", "2"]);
+	onValueChange.mockClear();
+
+	await t.open();
+	await t.getByTestId("checkbox-group-item-1").click();
+	expect(onValueChange).toHaveBeenCalledExactlyOnceWith(["2"]);
+});
+
 it("should call `onSelect` on the sub item when the sub item is selected", async () => {
 	const onSelect = vi.fn();
 	await open({