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

@@ -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>

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) {