fix(Combobox): a few issues (#1799)

Author: huntabyte

.changeset/cruel-cities-know.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix(Combobox): recompute whether the `ScrollDown` but should render when the input value changes

.changeset/good-parrots-greet.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix(Combobox): dont set the input value to an unselected item when `type='multiple'`

.gitignore

@@ -85,4 +85,5 @@ docs/src/routes/api/demos.json/demos.json
 __screenshots__
 bundle-analyzer/.temp-bundle-analysis
 bundle-analyzer/bundle-reports/*
-!bundle-analyzer/bundle-reports/latest.json
+!bundle-analyzer/bundle-reports/latest.json
+.tmp

package.json

@@ -48,7 +48,7 @@
 		"pnpm": ">=10.12.1",
 		"node": ">=20"
 	},
-	"packageManager": "[email protected].0",
+	"packageManager": "[email protected].1",
 	"private": true,
 	"pnpm": {
 		"onlyBuiltDependencies": [

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

@@ -198,10 +198,10 @@ export class SelectSingleRootState extends SelectBaseRootState {
 	readonly hasValue = $derived.by(() => this.opts.value.current !== "");
 	readonly currentLabel = $derived.by(() => {
 		if (!this.opts.items.current.length) return "";
-		const match = this.opts.items.current.find(
-			(item) => item.value === this.opts.value.current
-		)?.label;
-		return match ?? "";
+		return (
+			this.opts.items.current.find((item) => item.value === this.opts.value.current)?.label ??
+			""
+		);
 	});
 	readonly candidateLabels = $derived.by(() => {
 		if (!this.opts.items.current.length) return [];
@@ -239,8 +239,11 @@ export class SelectSingleRootState extends SelectBaseRootState {
 	}
 
 	toggleItem(itemValue: string, itemLabel: string = itemValue) {
-		this.opts.value.current = this.includesItem(itemValue) ? "" : itemValue;
-		this.opts.inputValue.current = itemLabel;
+		const newValue = this.includesItem(itemValue) ? "" : itemValue;
+		this.opts.value.current = newValue;
+		if (newValue !== "") {
+			this.opts.inputValue.current = itemLabel;
+		}
 	}
 
 	setInitialHighlightedNode() {
@@ -1054,8 +1057,6 @@ export class SelectItemState {
 	 */
 	onpointerup(e: BitsPointerEvent) {
 		if (e.defaultPrevented || !this.opts.ref.current) return;
-		// prevent any default behavior
-
 		/**
 		 * For one reason or another, when it's a touch pointer and _not_ on IOS,
 		 * we need to listen for the immediate click event to handle the selection,
@@ -1377,6 +1378,22 @@ export class SelectScrollDownButtonState {
 			return on(this.content.viewportNode, "scroll", () => this.handleScroll());
 		});
 
+		/**
+		 * If the input value changes, this means that the filtered items may have changed,
+		 * so we need to re-evaluate the scroll-ability of the list.
+		 */
+		watch(
+			[
+				() => this.root.opts.inputValue.current,
+				() => this.content.viewportNode,
+				() => this.content.isPositioned,
+			],
+			() => {
+				if (!this.content.viewportNode || !this.content.isPositioned) return;
+				this.handleScroll(true);
+			}
+		);
+
 		watch(
 			() => this.scrollButtonState.mounted,
 			() => {

tests/src/tests/combobox/combobox.browser.test.ts

@@ -773,6 +773,19 @@ describe("combobox - multiple", () => {
 		await expect.element(t.input).toHaveValue("");
 		expect(t.getHiddenInputs()).toHaveLength(0);
 	});
+
+	it("should not update the input value when the item is deselected", async () => {
+		const t = await openMultiple({});
+		const [item1, item2] = getItems(page.getByTestId);
+		await expectNotSelected([item1, item2]);
+		await item1.click();
+		await item2.click();
+		await expectSelected([item1, item2]);
+		await expect.element(t.input).toHaveValue("B");
+		await item1.click();
+		await expectNotSelected(item1);
+		await expect.element(t.input).toHaveValue("A");
+	});
 });
 
 function getItems(getter: typeof page.getByTestId, items = testItems) {