handle intereact outside

huntabyte · Jul 19, 2024 · a54bbe7 · a54bbe7
1 parent 4700cbc
commit a54bbe7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 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
@@ -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
@@ -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();