{#if titleText || $$slots.titleText} {titleText} {/if} { if (disabled) return; open = true; await tick(); ref.focus(); }} {id} {disabled} {translateWithId} > { if (!open && target.value.length > 0) { open = true; } if (!value.length) { clear(); open = true; } }} on:keydown on:keydown|stopPropagation={(e) => { const { key } = e; if (["Enter", "ArrowDown", "ArrowUp"].includes(key)) { e.preventDefault(); } if (key === "Enter") { open = !open; if ( highlightedIndex > -1 && filteredItems[highlightedIndex]?.id !== selectedId ) { open = false; if (filteredItems[highlightedIndex]) { value = itemToString(filteredItems[highlightedIndex]); selectedItem = filteredItems[highlightedIndex]; selectedId = filteredItems[highlightedIndex].id; } } else { // searching typed value in text list with lowercase const matchedItem = filteredItems.find( (e) => e.text.toLowerCase() === value?.toLowerCase() && !e.disabled, ) ?? filteredItems.find((e) => !e.disabled); if (matchedItem) { // typed value has matched or fallback to first enabled item open = false; selectedItem = matchedItem; value = itemToString(selectedItem); selectedId = selectedItem.id; } } highlightedIndex = -1; } else if (key === "Tab") { open = false; } else if (key === "ArrowDown") { change(1); } else if (key === "ArrowUp") { change(-1); } else if (key === "Escape") { clear(); } }} on:keyup on:focus on:blur on:blur={({ relatedTarget }) => { if (!open || !relatedTarget) return; if ( relatedTarget && !["INPUT", "SELECT", "TEXTAREA"].includes(relatedTarget.tagName) && relatedTarget.getAttribute("role") !== "button" && relatedTarget.getAttribute("role") !== "searchbox" ) { ref.focus(); } }} on:paste /> {#if invalid} {/if} {#if !invalid && warn} {/if} {#if value} {/if} { if (disabled) return; e.stopPropagation(); open = !open; }} {translateWithId} {open} /> {#if open} {#each filteredItems as item, i (item.id)} { if (item.disabled) { e.stopPropagation(); return; } selectedId = item.id; open = false; if (filteredItems[i]) { value = itemToString(filteredItems[i]); } }} on:mouseenter={() => { if (item.disabled) return; highlightedIndex = i; }} > {itemToString(item)} {#if selectedItem && selectedItem.id === item.id} {/if} {/each} {/if} {#if !invalid && helperText && !warn} {/if}