fix(Select): multiple form submission (#1816)

Author: huntabyte

.changeset/clean-showers-float.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix(Select): don't submit empty string when no values are selected in multiple mode

packages/bits-ui/src/lib/bits/select/components/select-hidden-input.svelte

@@ -5,7 +5,7 @@
 	import HiddenInput from "$lib/bits/utilities/hidden-input.svelte";
 
 	let {
-		value = $bindable(""),
+		value = $bindable(),
 		autocomplete,
 	}: { value?: string } & Omit<HTMLInputAttributes, "value"> = $props();
 

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

@@ -1182,7 +1182,7 @@ export class SelectGroupHeadingState {
 
 interface SelectHiddenInputStateOpts
 	extends ReadableBoxedValues<{
-		value: string;
+		value: string | undefined;
 	}> {}
 
 export class SelectHiddenInputState {

tests/src/tests/select/select.browser.test.ts

@@ -851,6 +851,17 @@ describe("select - multiple", () => {
 
 		await expectNotExists(t.getContent());
 	});
+
+	it("should not submit an array with a single empty string when the `name` prop is passed but no items are selected", async () => {
+		let submittedValues: string[] | undefined;
+		const t = setupMultiple({
+			onFormSubmit: (fd: FormData) => {
+				submittedValues = fd.getAll("themes") as string[];
+			},
+		});
+		await t.submit.click();
+		expect(submittedValues).toHaveLength(0);
+	});
 });
 
 function getItems(getter: typeof page.getByTestId, items = testItems) {