fix: select component to handle empty string values for keyboard (#979)

Co-authored-by: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>
huntabyte · Dec 6, 2024 · a5e376d · a5e376d
1 parent b07c6ed
commit a5e376d
Show file tree

Hide file tree

Showing 8 changed files with 165 additions and 56 deletions.
diff --git a/.changeset/ten-tigers-exist.md b/.changeset/ten-tigers-exist.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: allow `Select` to handle empty string values via keyboard
diff --git a/packages/bits-ui/src/lib/bits/select/select.svelte.ts b/packages/bits-ui/src/lib/bits/select/select.svelte.ts
@@ -566,7 +566,8 @@ class SelectTriggerState {
 				return;
 			}
 
-			if (highlightedValue) {
+			//"" is a valid value for a select item so we need to check for that
+			if (highlightedValue !== null) {
 				this.root.toggleItem(highlightedValue, this.root.highlightedLabel ?? undefined);
 			}
 

diff --git a/packages/tests/src/tests/helpers/select.ts b/packages/tests/src/tests/helpers/select.ts
@@ -0,0 +1,11 @@
+/**
+ * Generates consistent test ids for select items, handling empty strings and null values
+ * @param value - The value of the item
+ * @returns The test id
+ */
+export function generateTestId(value: string | null) {
+	return value && value !== null ? value : "empty";
+}
+export function getTestId(item: { value: string | null }) {
+	return item.value && item.value !== null ? item.value : "empty";
+}
diff --git a/packages/tests/src/tests/select/select-force-mount-test.svelte b/packages/tests/src/tests/select/select-force-mount-test.svelte
@@ -5,6 +5,7 @@
 		type WithoutChildren,
 		type WithoutChildrenOrChild,
 	} from "bits-ui";
+	import { generateTestId } from "../helpers/select";
 	export type Item = {
 		value: string;
 		label: string;
@@ -61,13 +62,19 @@
 										>Options</Select.GroupHeading
 									>
 									{#each filteredItems as { value, label, disabled }}
-										<Select.Item data-testid={value} {disabled} {value} {label}>
+										{@const testId = generateTestId(value)}
+										<Select.Item
+											data-testid={testId}
+											{disabled}
+											{value}
+											{label}
+										>
 											{#snippet children({
 												selected,
 												highlighted: _highlighted,
 											})}
 												{#if selected}
-													<span data-testid="{value}-indicator">x</span>
+													<span data-testid="{testId}-indicator">x</span>
 												{/if}
 												{label}
 											{/snippet}
@@ -87,10 +94,11 @@
 									>Options</Select.GroupHeading
 								>
 								{#each filteredItems as { value, label, disabled }}
-									<Select.Item data-testid={value} {disabled} {value} {label}>
+									{@const testId = generateTestId(value)}
+									<Select.Item data-testid={testId} {disabled} {value} {label}>
 										{#snippet children({ selected, highlighted: _highlighted })}
 											{#if selected}
-												<span data-testid="{value}-indicator">x</span>
+												<span data-testid="{testId}-indicator">x</span>
 											{/if}
 											{label}
 										{/snippet}

diff --git a/packages/tests/src/tests/select/select-multi-test.svelte b/packages/tests/src/tests/select/select-multi-test.svelte
@@ -5,6 +5,7 @@
 		type WithoutChildren,
 		type WithoutChildrenOrChild,
 	} from "bits-ui";
+	import { generateTestId } from "../helpers/select";
 
 	export type Item = {
 		value: string;
@@ -74,10 +75,11 @@
 					<Select.Group data-testid="group">
 						<Select.GroupHeading data-testid="group-label">Options</Select.GroupHeading>
 						{#each filteredItems as { value, label, disabled }}
-							<Select.Item data-testid={value} {disabled} {value} {label}>
+							{@const testId = generateTestId(value)}
+							<Select.Item data-testid={testId} {disabled} {value} {label}>
 								{#snippet children({ selected, highlighted: _highlighted })}
 									{#if selected}
-										<span data-testid="{value}-indicator">x</span>
+										<span data-testid="{testId}-indicator">x</span>
 									{/if}
 									{label}
 								{/snippet}

diff --git a/packages/tests/src/tests/select/select-test.svelte b/packages/tests/src/tests/select/select-test.svelte
@@ -5,6 +5,7 @@
 		type WithoutChildren,
 		type WithoutChildrenOrChild,
 	} from "bits-ui";
+	import { generateTestId } from "../helpers/select";
 	export type Item = {
 		value: string;
 		label: string;
@@ -51,10 +52,11 @@
 				<Select.Group data-testid="group">
 					<Select.GroupHeading data-testid="group-label">Options</Select.GroupHeading>
 					{#each filteredItems as { value, label, disabled }}
-						<Select.Item data-testid={value} {disabled} {value} {label}>
+						{@const testId = generateTestId(value)}
+						<Select.Item data-testid={testId} {disabled} {value} {label}>
 							{#snippet children({ selected, highlighted: _highlighted })}
 								{#if selected}
-									<span data-testid="{value}-indicator">x</span>
+									<span data-testid="{testId}-indicator">x</span>
 								{/if}
 								{label}
 							{/snippet}