{#if open}
{ if (e.key === 'Escape') { open = false; searchInput?.focus(); } }} tabindex="0" > {#each filteredItems as item, i (i + item.value)}
{ value = item; open = false; searchInput?.focus(); onchange?.(item); }} onkeydown={() => {}} tabindex="-1" > {#if item.icon} {@render item.icon(item)} {/if}
{#if item.render} {@render item.render(item)} {:else} {getLabel(item)} {/if}
{#if item?.infotext}
{item.infotext}
{/if} {#if value?.value === item.value}
{/if}
{:else} {notFoundMessage} {/each}
{/if}
{#if label} {/if} { valid = e.detail.valid; onvalidate?.(e); }} />
{@render searchInputBox(true)}
{#if invalidMessage !== null}
{/if}
{#snippet searchInputBox(caret: boolean = true)}
{#if iconVisible}
{#if useHighlighted && highlighted?.icon} {@render highlighted.icon(highlighted)} {:else if value?.icon} {@render value.icon(value)} {:else} ❌ {/if}
{/if} { if (!open) { setTimeout(() => { searchInput?.select(); }, 100); } open = true; }} onkeydown={(e) => { if (!searchInput) return; if (e.key === 'Tab' || e.key === 'Enter') { if (open && highlighted && highlighted.value !== value?.value) { value = highlighted; onchange?.(highlighted); } if (e.key === 'Enter') { e.preventDefault(); } open = false; return; } else if (e.key === 'Escape') { open = false; return; } // open the picker open = true; if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { searching = false; console.log('arrowNavOnly = true'); e.preventDefault(); } if (e.key === 'ArrowDown') { const nextIndex = getHightlightedID() + 1; if (nextIndex < filteredItems.length) { highlighted = filteredItems[nextIndex]; } return; } else if (e.key === 'ArrowUp') { const prevIndex = getHightlightedID() - 1; if (prevIndex >= 0) { highlighted = filteredItems[prevIndex]; } return; } }} oninput={() => { if (!searchInput) return; searchValue = searchInput.value; searching = true; }} /> {#if (value && value.infotext) || (highlighted && useHighlighted && highlighted.infotext)}
{useHighlighted && highlighted?.infotext ? highlighted.infotext : value?.infotext}
{/if} {#if caret} { open = !open; if (open) searchInput?.focus(); }} /> {/if}
{/snippet}