{ dispatch('input'); }} on:focus={() => { onFocus(); hovering = false; focused = true; initTags(); }} on:blur={() => { if (!hovering) { focused = false; } }} on:keydown={(e) => { if (e.key === 'Enter') { if (filteredItems.length > 0) { const itemElement = document.getElementById(`search-item-${selectedIdx}`); itemElement.click(); return; } if (filteredOptions.length > 0) { const optionElement = document.getElementById(`search-option-${selectedIdx}`); optionElement.click(); return; } } if (e.key === 'ArrowUp') { e.preventDefault(); selectedIdx = Math.max(0, selectedIdx - 1); } else if (e.key === 'ArrowDown') { e.preventDefault(); if (filteredItems.length > 0) { if (selectedIdx === filteredItems.length - 1) { focused = false; } else { selectedIdx = Math.min(selectedIdx + 1, filteredItems.length - 1); } } else { if (selectedIdx === filteredOptions.length - 1) { focused = false; } else { selectedIdx = Math.min(selectedIdx + 1, filteredOptions.length - 1); } } } else { // if the user types something, reset to the top selection. selectedIdx = 0; } const item = document.querySelector(`[data-selected="true"]`); item?.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' }); if (!document.getElementById('search-options-container')) { onKeydown(e); } }} /> {#if showClearButton && value} {/if}