{#if titleText}
{/if}
{
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') {
open = false;
}
}}"
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 open}
{#each filteredItems as item, i (item.id)}
{itemToString(item)}
{#if selectedItem && selectedItem.id === item.id}
{/if}
{/each}
{/if}
{#if !invalid && helperText && !warn}
{helperText}
{/if}