) {
if (item.__is_create && onCreateItem) {
onCreateItem(item.value)
@@ -131,11 +147,6 @@
if (onClear) onClear()
else value = undefined
}
-
- let inputText = $derived.by(() => {
- let text = valueEntry?.label ?? getLabel({ value }) ?? ''
- return transformInputSelectedText?.(text) ?? text
- })
(open ? filterText : inputText), (v) => open && (filterText = v)}
- placeholder={loading && !value
- ? 'Loading...'
- : value && !showPlaceholderOnOpen && !(open && !valueEntry)
- ? inputText
- : placeholder}
+ value={inputValue}
+ placeholder={loading && !value ? 'Loading...' : placeholder}
style={containerStyle}
class={twMerge(
inputBaseClass,
@@ -182,16 +189,17 @@
inputBorderClass({ error, forceFocus: open }),
'w-full',
open ? '' : 'cursor-pointer',
- // Show value as placeholder when opening the dropdown and the search is empty
- !value ? 'placeholder-hint' : '!placeholder-primary',
+ 'placeholder-hint',
(clearable || RightIcon) && !disabled && value ? 'pr-8' : '',
inputClass ?? ''
)}
autocomplete="off"
oninput={(e) => {
- // Explicitly open dropdown if closed and update filterText
if (!open) open = true
filterText = e.currentTarget.value
+ if (allowUserInput) {
+ value = filterText || undefined
+ }
}}
onpointerdown={() => (open = true)}
bind:this={inputEl}
@@ -200,7 +208,7 @@
(value = i)}
placeholder="Search or create..."
- showPlaceholderOnOpen
items={onlySelectedTags}
id="custom-instance-db-select"
disabled={!$isCustomInstanceDbEnabled}