From fa22ec69d8c657b4b6b0f16115f77e6780dad600 Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Tue, 17 Feb 2026 09:33:22 +0000
Subject: [PATCH] fix: only show email validation error after dropdown closes

Add onClose callback to AutocompleteSelect and use it in AddUser
to defer validation until the user finishes interacting with the
dropdown, avoiding visual noise between the dropdown and error.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/AddUser.svelte                | 8 ++++++--
 .../src/lib/components/select/AutocompleteSelect.svelte   | 3 +++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/AddUser.svelte b/frontend/src/lib/components/AddUser.svelte
index 6ee9cd25bd..1fe971f8bf 100644
--- a/frontend/src/lib/components/AddUser.svelte
+++ b/frontend/src/lib/components/AddUser.svelte
@@ -105,8 +105,9 @@
 		dispatch('new')
 	}
 
+	let emailTouched = $state(false)
 	let emailError = $derived.by(() => {
-		if (!email) return undefined
+		if (!email || !emailTouched) return undefined
 		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
 		return emailRegex.test(email) ? undefined : 'Please enter a valid email address'
 	})
@@ -133,6 +134,7 @@
 					loading={emailsLoading}
 					disablePortal={true}
 					error={!!emailError}
+					onClose={() => (emailTouched = true)}
 				/>
 			{:else}
 				<TextInput
@@ -146,7 +148,9 @@
 					error={!!emailError}
 				/>
 			{/if}
-			<InputError error={emailError} />
+			{#if emailError}
+				<InputError error={emailError} />
+			{/if}
 
 			{#if !automateUsernameCreation}
 				<span class="text-xs mb-1 pt-2 leading-6">Username</span>
diff --git a/frontend/src/lib/components/select/AutocompleteSelect.svelte b/frontend/src/lib/components/select/AutocompleteSelect.svelte
index 0df15bb532..a387c638ee 100644
--- a/frontend/src/lib/components/select/AutocompleteSelect.svelte
+++ b/frontend/src/lib/components/select/AutocompleteSelect.svelte
@@ -34,6 +34,7 @@
 		transformInputSelectedText,
 		onFocus,
 		onBlur,
+		onClose,
 		onClear
 	}: {
 		items?: Item[]
@@ -54,6 +55,7 @@
 		transformInputSelectedText?: (text: string) => string
 		onFocus?: () => void
 		onBlur?: () => void
+		onClose?: () => void
 		onClear?: () => void
 	} = $props()
 
@@ -92,6 +94,7 @@
 	$effect(() => {
 		if (!open) {
 			filterText = ''
+			onClose?.()
 		} else {
 			untrack(() => {
 				if (rawLabel) {