fix(Command): allow selection of initial value (#1837)

Author: huntabyte

.changeset/eight-lamps-stop.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix(Command): allow selection of the initial value when passed as the `value` prop

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

@@ -189,8 +189,11 @@ export class CommandRootState {
 	 */
 	#sort(): void {
 		if (!this._commandState.search || this.opts.shouldFilter.current === false) {
-			// If no search and no selection yet, select first item
-			this.#selectFirstItem();
+			// if no search and no initial value set or when clearing search,
+			// we select the first item.
+			if (!this._commandState.value || !this.#isInitialMount) {
+				this.#selectFirstItem();
+			}
 			return;
 		}
 

tests/src/tests/command/command.browser.test.ts

@@ -36,6 +36,22 @@ it("should allow forcing the selected value", async () => {
 	await expect.element(page.getByText("Introduction")).toHaveAttribute("data-selected");
 });
 
+it("should respect initial value when it's not the first item", async () => {
+	setup({ value: "Radio Group" });
+
+	// ensure the initial value is selected, not the first item
+	await expect.element(page.getByText("Radio Group")).toHaveAttribute("data-selected");
+	await expect.element(page.getByText("Introduction")).not.toHaveAttribute("data-selected");
+});
+
+it("should respect initial value for items in the first group", async () => {
+	setup({ value: "Styling" });
+
+	// ensure the provided value is selected, not the first item
+	await expect.element(page.getByText("Styling")).toHaveAttribute("data-selected");
+	await expect.element(page.getByText("Introduction")).not.toHaveAttribute("data-selected");
+});
+
 it("should render the separator when search is empty and remove it when search is not empty", async () => {
 	const t = setup();