{
if (disabled || readonly) return;
open = true;
}}
on:input
on:input={(event) => {
if (!open && event.target.value.length > 0) {
open = true;
}
if (!value.length) {
clear();
open = true;
}
}}
on:keydown
on:keydown|stopPropagation={(event) => {
if (readonly) return;
if (
event.key === "Enter" ||
event.key === "ArrowDown" ||
event.key === "ArrowUp"
) {
event.preventDefault();
}
if (event.key === "Enter") {
const wasOpen = open;
open = !open;
if (
highlightedIndex > -1 &&
filteredItems[highlightedIndex]?.id !== selectedId
) {
open = false;
valueBeforeOpen = "";
if (filteredItems[highlightedIndex]) {
value = itemToString(filteredItems[highlightedIndex]);
selectedItem = filteredItems[highlightedIndex];
selectedId = filteredItems[highlightedIndex].id;
if (wasOpen) dispatch("close", { trigger: "select" });
}
} else {
// Match typed value case-insensitively against item text
const inputValue = ref?.value ?? value;
const matchedItem = filteredItems.find(
(item) =>
item.text.toLowerCase() === inputValue?.toLowerCase() &&
!item.disabled,
);
if (matchedItem) {
open = false;
valueBeforeOpen = "";
selectedItem = matchedItem;
value = itemToString(selectedItem);
selectedId = selectedItem.id;
if (wasOpen) dispatch("close", { trigger: "select" });
}
}
highlightedIndex = -1;
} else if (event.key === "Tab") {
close("escape-key");
} else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
const step = event.key === "ArrowDown" ? 1 : -1;
if (event.altKey) {
// APG combobox pattern: Alt+ArrowDown opens a closed menu
// without moving the highlight; Alt+ArrowUp closes an open one.
if (event.key === "ArrowDown" && !open) {
open = true;
} else if (event.key === "ArrowUp" && open) {
close("escape-key");
}
} else if (open) {
change(step);
} else {
open = true;
// `filteredItems` recomputes and `afterUpdate` highlights any
// selected item only after the update flushes; if nothing is
// highlighted by then, start at the first (ArrowDown) or last
// (ArrowUp) enabled item.
tick().then(() => {
if (highlightedIndex === -1) change(step);
});
}
} else if (event.key === "Escape") {
// Dispatch before `clear()` flips `open`, so the guard still sees it open.
close("escape-key");
clear();
}
}}
on:keyup
on:focus
on:focus={() => {
if (isFluid) fieldFocused = true;
if (selectTextOnFocus && ref) {
tick().then(() => ref.select());
}
}}
on:blur
on:blur={(event) => {
if (isFluid) fieldFocused = false;
if (!open || !event.relatedTarget) return;
if (
fieldRef?.contains(event.relatedTarget) ||
listRef?.contains(event.relatedTarget)
) {
ref.focus();
}
}}
on:paste
>
{#if showInvalid}
{/if}
{#if showWarn}
{/if}
{#if value}
clear({ open: openOnClear })}
translateWithId={translateWithIdSelection}
{disabled}
{readonly}
{open}
/>
{/if}
{
if (disabled || readonly) return;
event.stopPropagation();
open = !open;
}}
{translateWithId}
{open}
/>
{#if open}
{
listScrollTop = event.target.scrollTop;
}}
on:mouseleave={() => {
// Clear the hover highlight when the cursor leaves the menu so the
// highlighted state does not linger on the last hovered item.
highlightedIndex = -1;
}}
bind:ref={listRef}
style={effectivePortalMenu
? `max-height: ${virtualConfig
? `${virtualConfig.containerHeight}px; overflow-y: auto`
: menuMaxHeight};`
: virtualConfig
? `max-height: ${virtualConfig.containerHeight}px; overflow-y: auto;`
: undefined}
>
{#if virtualData?.isVirtualized}
{#each itemsToRender as item, index (item.id)}
{@const actualIndex = virtualData.startIndex + index}
{@const selected = selectedItem?.id === item.id}
{@const highlighted = highlightedIndex === actualIndex}
{
if (item.disabled) {
event.stopPropagation();
return;
}
selectedId = item.id;
close("select");
valueBeforeOpen = "";
if (filteredItems[actualIndex]) {
value = itemToString(filteredItems[actualIndex]);
}
}}
on:mouseenter={() => {
if (item.disabled) return;
highlightedIndex = actualIndex;
}}
>
{#if $$slots.icon || item.icon}
{/if}
{itemToString(item)}
{#if $$slots.iconRight}
{:else if selected}
{/if}
{/each}