{#if titleText} {titleText} {/if} {#if helperText} {/if} { open = true; }} {id} {name} {disabled} {translateWithId}> { inputValue = target.value; }} on:keydown on:keydown|stopPropagation={({ key }) => { if (key === 'Enter') { open = !open; if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) { selectedIndex = highlightedIndex; open = false; } } 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:focus on:blur on:blur={({ relatedTarget }) => { if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') { ref.focus(); } }} {disabled} {placeholder} {id} value={inputValue} /> {#if invalid} {/if} {#if inputValue} { selectedIndex = -1; open = false; ref.focus(); }} {translateWithId} {disabled} {open} /> {/if} { open = !open; }} {translateWithId} {open} /> {#if open} {#each filteredItems as item, i (item.id || i)} { selectedId = item.id; selectedIndex = items .map(({ id }) => id) .indexOf(filteredItems[i].id); open = false; }} on:mouseenter={() => { highlightedIndex = i; }}> {itemToString(item)} {/each} {/if}