{#if label}
{/if}
{
valid = e.detail.valid;
onvalidate?.(e);
}}
/>
{@render searchInputBox(true)}
{#if invalidMessage !== null}
{/if}
{
if (optDisabled) return;
updateValue(opt);
searchInput?.focus();
}}
onkeydown={() => {}}
tabindex="-1"
>
{@render optionIcon(opt)}
{@render snippetOrString(opt, labelRender || getLabel(opt))}
{#if opt.infotext || infotextRender}
{@render snippetOrString(opt, infotextRender || opt.infotext)}
{/if}
{#if value?.value === opt.value}
{/if}
{#if iconVisible}
{#if loading}
{:else if useHighlighted && highlighted}
{@render optionIcon(highlighted)}
{:else if value}
{@render optionIcon(value)}
{:else if icon}
{#if typeof icon === 'function'}
{@render icon()}
{:else}
{/if}
{:else}
❌
{/if}
{/if}
{
if (!open) {
setTimeout(() => {
searchInput?.select();
}, 100);
}
openPicker();
}}
onkeydown={(e) => {
if (!searchInput) return;
if (e.key === 'Tab' || e.key === 'Enter') {
if (open && highlighted && !highlighted.disabled && highlighted.value !== value?.value) {
updateValue(highlighted);
}
if (e.key === 'Enter') {
closePicker();
e.preventDefault();
}
return;
} else if (e.key === 'Escape') {
closePicker();
return;
}
// open the picker
openPicker();
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
searching = false;
e.preventDefault();
}
if (e.key === 'ArrowDown') {
highlighted = getNextOption();
return;
} else if (e.key === 'ArrowUp') {
highlighted = getPrevOption();
return;
}
}}
oninput={() => {
if (!searchInput) return;
searchValue = searchInput.value;
searching = true;
onsearch?.(searchValue);
}}
use={() => {
conditionalUse();
}}
/>
{#if (value && value.infotext) || (highlighted && useHighlighted && highlighted.infotext) || infotextRender}
{#if useHighlighted && highlighted}
{@render snippetOrString(highlighted, infotextRender || highlighted.infotext)}
{:else if value}
{@render snippetOrString(value, infotextRender || value.infotext)}
{/if}
{/if}
{#if caret}
{
open = !open;
if (open) searchInput?.focus();
}}
/>
{/if}