{#if titleText}
{/if}
{#if invalid}
{/if}
{#if !invalid && warn}
{/if}
{#if checked.length > 0}
{/if}
{#if filterable}
{
if (key === 'Enter') {
if (highlightedIndex > -1) {
if (filterable) {
const filteredItemId = filteredItems[highlightedIndex].id;
const filteredItemIndex = sortedItems
.map((item) => item.id)
.indexOf(filteredItemId);
sortedItems = sortedItems.map((item, i) => {
if (i !== filteredItemIndex) return item;
return { ...item, checked: !item.checked };
});
} else {
sortedItems = sortedItems.map((item, i) => {
if (i !== highlightedIndex) return item;
return { ...item, checked: !item.checked };
});
}
}
} else if (key === 'Tab') {
open = false;
inputRef.blur();
} else if (key === 'ArrowDown') {
change(1);
} else if (key === 'ArrowUp') {
change(-1);
} else if (key === 'Escape') {
open = false;
} else if (key === ' ') {
if (!open) open = true;
}
}}"
on:keyup
on:focus
on:blur
on:blur="{({ relatedTarget }) => {
if (
relatedTarget &&
!['INPUT', 'SELECT', 'TEXTAREA'].includes(
relatedTarget.tagName
) &&
relatedTarget.getAttribute('role') !== 'button' &&
relatedTarget.getAttribute('role') !== 'searchbox'
) {
inputRef.focus();
}
}}"
disabled="{disabled}"
placeholder="{placeholder}"
id="{id}"
name="{name}"
value="{inputValue}"
/>
{#if invalid}
{/if}
{#if inputValue}
{/if}
{/if}
{#if !filterable}
{label}
{/if}
{#if open}
{#each filterable ? filteredItems : sortedItems as item, i (item.id)}
{/each}
{/if}
{#if !inline && !invalid && !warn && helperText}
{helperText}
{/if}