From bfb65fc8b4487a3429564c259504349262dd090c Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Mon, 16 Feb 2026 11:52:54 +0000
Subject: [PATCH] fix: allow editing custom email in Select component

When a custom value (not in the items list) is selected, reopening
the dropdown now pre-fills the filter with the current value so users
can directly edit it. Also hide the "Use custom email" create option
when the filter matches the current value, and show the regular
placeholder instead of the value when editing a custom entry.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/select/Select.svelte   | 14 +++++++++++---
 frontend/src/lib/components/select/utils.svelte.ts | 11 +++++++++--
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/select/Select.svelte b/frontend/src/lib/components/select/Select.svelte
index 0aab7403de..f57f21c300 100644
--- a/frontend/src/lib/components/select/Select.svelte
+++ b/frontend/src/lib/components/select/Select.svelte
@@ -95,7 +95,7 @@
 	let inputEl: HTMLInputElement | undefined = $state()
 
 	let processedItems: ProcessedItem<Value>[] = $derived.by(() => {
-		let args = { items, createText, filterText, groupBy, onCreateItem, sortBy }
+		let args = { items, createText, filterText, groupBy, onCreateItem, sortBy, currentValue: value }
 		return untrack(() => processItems(args))
 	})
 
@@ -103,7 +103,15 @@
 		if (filterText) open = true
 	})
 	$effect(() => {
-		if (!open) filterText = ''
+		if (!open) {
+			filterText = ''
+		} else {
+			untrack(() => {
+				if (value && !valueEntry) {
+					filterText = inputText
+				}
+			})
+		}
 	})
 
 	let valueEntry = $derived(value && processedItems?.find((item) => deepEqual(item.value, value)))
@@ -163,7 +171,7 @@
 		bind:value={() => (open ? filterText : inputText), (v) => open && (filterText = v)}
 		placeholder={loading && !value
 			? 'Loading...'
-			: value && !showPlaceholderOnOpen
+			: value && !showPlaceholderOnOpen && !(open && !valueEntry)
 				? inputText
 				: placeholder}
 		style={containerStyle}
diff --git a/frontend/src/lib/components/select/utils.svelte.ts b/frontend/src/lib/components/select/utils.svelte.ts
index 8a5671a6e4..d13a528d8e 100644
--- a/frontend/src/lib/components/select/utils.svelte.ts
+++ b/frontend/src/lib/components/select/utils.svelte.ts
@@ -4,7 +4,8 @@ export function processItems<Item extends { label?: string; value: any }>({
 	groupBy,
 	sortBy,
 	onCreateItem,
-	createText
+	createText,
+	currentValue
 }: {
 	items?: Item[]
 	filterText?: string
@@ -12,6 +13,7 @@ export function processItems<Item extends { label?: string; value: any }>({
 	sortBy?: (a: Item, b: Item) => number
 	onCreateItem?: (value: string) => void
 	createText?: string
+	currentValue?: any
 }): ProcessedItem<Item['value']>[] {
 	let items2 =
 		items?.map((item) => ({
@@ -28,7 +30,12 @@ export function processItems<Item extends { label?: string; value: any }>({
 	if (sortBy) {
 		items2 = items2?.sort(sortBy)
 	}
-	if (onCreateItem && filterText && !items2.some((item) => item.label === filterText)) {
+	if (
+		onCreateItem &&
+		filterText &&
+		filterText !== currentValue &&
+		!items2.some((item) => item.label === filterText)
+	) {
 		items2.push({
 			label: createText ?? `Add new: "${filterText}"`,
 			value: filterText,