From 3d57f9b1da43e8a79956ccfef5e2a0903cfd316b Mon Sep 17 00:00:00 2001
From: Florian <45694132+flo-bit@users.noreply.github.com>
Date: Sun, 19 Apr 2026 17:31:46 +0200
Subject: [PATCH] fix atproto login

---
 .changeset/small-meals-teach.md                  |  5 +++++
 .../AtprotoHandlePopup.svelte                    | 16 +++++++++-------
 2 files changed, 14 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/small-meals-teach.md

diff --git a/.changeset/small-meals-teach.md b/.changeset/small-meals-teach.md
new file mode 100644
index 0000000..e409968
--- /dev/null
+++ b/.changeset/small-meals-teach.md
@@ -0,0 +1,5 @@
+---
+'@foxui/social': patch
+---
+
+fix atproto login for handles that don't appear in typeahead, and close the typeahead popup when the input loses focus
diff --git a/packages/social/src/lib/components/atproto-handle-popup/AtprotoHandlePopup.svelte b/packages/social/src/lib/components/atproto-handle-popup/AtprotoHandlePopup.svelte
index 922a80c..d99ddc7 100644
--- a/packages/social/src/lib/components/atproto-handle-popup/AtprotoHandlePopup.svelte
+++ b/packages/social/src/lib/components/atproto-handle-popup/AtprotoHandlePopup.svelte
@@ -4,10 +4,9 @@
 	import { Avatar, cn, inputVariants } from '@foxui/core';
 
 	let results: Profile[] = $state([]);
-	let inputValue = $state('');
 
 	let {
-		value = $bindable(),
+		value = $bindable(''),
 		onselected,
 		ref = $bindable(null),
 		host = 'https://public.api.bsky.app',
@@ -38,7 +37,6 @@
 
 	function select(actor: Profile) {
 		results = [];
-		inputValue = '';
 		value = actor.handle;
 		onselected?.(actor);
 	}
@@ -48,12 +46,15 @@
 	<Command.Root shouldFilter={false} class="w-full">
 		<Command.Input
 			bind:ref
-			bind:value={inputValue}
-			oninput={() => search(inputValue)}
+			bind:value
+			oninput={() => search(value)}
+			onblur={() => {
+				results = [];
+			}}
 			onkeydown={(e) => {
-				if (e.key === 'Enter' && results.length === 0 && inputValue) {
+				if (e.key === 'Enter' && results.length === 0 && value) {
 					e.preventDefault();
-					select({ handle: inputValue, displayName: '', avatar: '', did: '' });
+					select({ handle: value, displayName: '', avatar: '', did: '' });
 				}
 			}}
 			class={cn(inputVariants(), 'w-full')}
@@ -72,6 +73,7 @@
 		/>
 		{#if results.length > 0}
 			<Command.List
+				onpointerdown={(e) => e.preventDefault()}
 				class="border-base-300 bg-base-50 dark:bg-base-800 dark:border-base-700 absolute z-100 mt-2.5 max-h-[30dvh] w-full overflow-y-auto rounded-ui border p-1 shadow-lg"
 			>
 				{#each results as actor (actor.did)}
-- 
knotmirror 0.0.1