From a54bbe7a9c2503610c50969eac47c46aa55d9506 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <johnstonhuntera@gmail.com>
Date: Fri, 19 Jul 2024 17:49:12 -0400
Subject: [PATCH] handle intereact outside

---
 packages/bits-ui/src/lib/bits/combobox/combobox.svelte.ts | 6 +++++-
 .../lib/bits/combobox/components/combobox-content.svelte  | 8 ++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

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 5e08a107f..a172c2a29 100644
--- a/packages/bits-ui/src/lib/bits/combobox/combobox.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/combobox/combobox.svelte.ts
@@ -52,6 +52,7 @@ class ComboboxBaseRootState {
 	inputValue = $state<string>("");
 	inputNode = $state<HTMLElement | null>(null);
 	contentNode = $state<HTMLElement | null>(null);
+	triggerNode = $state<HTMLElement | null>(null);
 	highlightedNode = $state<HTMLElement | null>(null);
 	highlightedValue = $derived.by(() => {
 		if (!this.highlightedNode) return null;
@@ -380,7 +381,7 @@ class ComboboxInputState {
 		}
 
 		if (INTERACTION_KEYS.includes(e.key)) return;
-		this.root.setHighlightedToFirstCandidate();
+		// this.root.setHighlightedToFirstCandidate();
 	};
 
 	#oninput = (e: Event & { currentTarget: HTMLInputElement }) => {
@@ -421,6 +422,9 @@ class ComboboxTriggerState {
 		useRefById({
 			id: this.#id,
 			ref: this.#ref,
+			onRefChange: (node) => {
+				this.root.triggerNode = node;
+			},
 		});
 	}
 
diff --git a/packages/bits-ui/src/lib/bits/combobox/components/combobox-content.svelte b/packages/bits-ui/src/lib/bits/combobox/components/combobox-content.svelte
index 1455602e8..f719b3c60 100644
--- a/packages/bits-ui/src/lib/bits/combobox/components/combobox-content.svelte
+++ b/packages/bits-ui/src/lib/bits/combobox/components/combobox-content.svelte
@@ -36,6 +36,14 @@
 	present={contentState.root.open.value || forceMount}
 	{id}
 	onInteractOutside={(e) => {
+		if (
+			e.target === contentState.root.triggerNode ||
+			e.target === contentState.root.inputNode
+		) {
+			e.preventDefault();
+			return;
+		}
+
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;
 		contentState.root.closeMenu();