From 9683000387431f4f0dad4275e3c91ff4ddecb0fa Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 19 Jul 2024 18:11:41 -0400
Subject: [PATCH] update key

---
 .../src/lib/bits/combobox/combobox.svelte.ts    | 17 +++++++++--------
 .../lib/components/demos/combobox-demo.svelte   |  6 +++---
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/bits-ui/src/lib/bits/combobox/combobox.svelte.ts b/packages/bits-ui/src/lib/bits/combobox/combobox.svelte.ts
index 8b97a2f58..ed20b08b8 100644
--- a/packages/bits-ui/src/lib/bits/combobox/combobox.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/combobox/combobox.svelte.ts
@@ -13,7 +13,7 @@ import { createContext } from "$lib/internal/createContext.js";
 import { kbd } from "$lib/internal/kbd.js";
 import type { WithRefProps } from "$lib/internal/types.js";
 import { useRefById } from "$lib/internal/useRefById.svelte.js";
-import { onDestroy, tick } from "svelte";
+import { onDestroy, tick, untrack } from "svelte";
 
 // prettier-ignore
 export const INTERACTION_KEYS = [kbd.ARROW_LEFT, kbd.ESCAPE, kbd.ARROW_RIGHT, kbd.SHIFT, kbd.CAPS_LOCK, kbd.CONTROL, kbd.ALT, kbd.META, kbd.ENTER, kbd.F1, kbd.F2, kbd.F3, kbd.F4, kbd.F5, kbd.F6, kbd.F7, kbd.F8, kbd.F9, kbd.F10, kbd.F11, kbd.F12];
@@ -77,7 +77,7 @@ class ComboboxBaseRootState {
 
 		$effect(() => {
 			if (!this.open.value) {
-				this.highlightedNode = null;
+				untrack(() => (this.highlightedNode = null));
 			}
 		});
 	}
@@ -96,10 +96,12 @@ class ComboboxBaseRootState {
 	};
 
 	setHighlightedToFirstCandidate = () => {
+		console.log("setting to first candidate");
 		afterTick(() => {
+			this.setHighlightedNode(null);
 			const candidateNodes = this.getCandidateNodes();
 			if (!candidateNodes.length) return;
-			this.highlightedNode = candidateNodes[0]!;
+			this.setHighlightedNode(candidateNodes[0]!);
 		});
 	};
 
@@ -146,9 +148,7 @@ class ComboboxSingleRootState extends ComboboxBaseRootState {
 
 		$effect(() => {
 			if (!this.open.value) return;
-			afterTick(() => {
-				this.#setInitialHighlightedNode();
-			});
+			this.#setInitialHighlightedNode();
 		});
 	}
 
@@ -312,7 +312,6 @@ class ComboboxInputState {
 			this.root.openMenu();
 
 			if (this.root.hasValue) return;
-			await tick();
 
 			const candidateNodes = this.root.getCandidateNodes();
 			if (!candidateNodes.length) return;
@@ -543,7 +542,9 @@ class ComboboxItemState {
 	};
 
 	#onpointermove = (_: PointerEvent) => {
-		this.root.setHighlightedNode(this.#ref.value);
+		if (this.root.highlightedNode !== this.#ref.value) {
+			this.root.setHighlightedNode(this.#ref.value);
+		}
 	};
 
 	#onpointerleave = (_: PointerEvent) => {
diff --git a/sites/docs/src/lib/components/demos/combobox-demo.svelte b/sites/docs/src/lib/components/demos/combobox-demo.svelte
index 248644302..beae3d128 100644
--- a/sites/docs/src/lib/components/demos/combobox-demo.svelte
+++ b/sites/docs/src/lib/components/demos/combobox-demo.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <Combobox.Root
-	type="multiple"
+	type="single"
 	name="favoriteFruit"
 	onOpenChange={(o) => {
 		if (!o) inputValue = "";
@@ -47,9 +47,9 @@
 		class="w-[var(--bits-combobox-trigger-width)] min-w-[var(--bits-combobox-trigger-width)] rounded-xl border border-muted bg-background px-1 py-3 shadow-popover outline-none"
 		sideOffset={10}
 	>
-		{#each filteredFruits as fruit (fruit.value)}
+		{#each filteredFruits as fruit, i (i + fruit.value)}
 			<Combobox.Item
-				class="flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none transition-all duration-75 data-[highlighted]:bg-muted"
+				class="flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm capitalize outline-none duration-75 data-[highlighted]:bg-muted"
 				value={fruit.value}
 				label={fruit.label}
 			>