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[] = $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({ groupBy, sortBy, onCreateItem, - createText + createText, + currentValue }: { items?: Item[] filterText?: string @@ -12,6 +13,7 @@ export function processItems({ sortBy?: (a: Item, b: Item) => number onCreateItem?: (value: string) => void createText?: string + currentValue?: any }): ProcessedItem[] { let items2 = items?.map((item) => ({ @@ -28,7 +30,12 @@ export function processItems({ 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,