diff --git a/frontend/src/lib/components/Select.svelte b/frontend/src/lib/components/Select.svelte index 31ebd32722..2e10ca669a 100644 --- a/frontend/src/lib/components/Select.svelte +++ b/frontend/src/lib/components/Select.svelte @@ -25,6 +25,16 @@ let search = $state('') let open = $state(false) + let keyArrowPos = $state() + + $effect(() => { + ;[search, open, processedItems] + keyArrowPos = undefined + }) + + $effect(() => { + if (search) open = true + }) let processedItems: (Item & { __select_group?: string; label: string })[] = $derived.by(() => { let items2 = @@ -72,6 +82,27 @@ } + { + console.log('keypress', e.key) + if (e.key === 'ArrowUp' && keyArrowPos !== undefined && processedItems?.length > 0) { + keyArrowPos = keyArrowPos <= 0 ? undefined : keyArrowPos - 1 + } else if (e.key === 'ArrowDown' && processedItems?.length > 0) { + if (keyArrowPos === undefined) { + keyArrowPos = 0 + } else { + keyArrowPos = Math.min(processedItems.length - 1, keyArrowPos + 1) + } + } else if (e.key === 'Enter' && keyArrowPos !== undefined && processedItems?.[keyArrowPos]) { + setValue(processedItems[keyArrowPos]) + } else { + keyArrowPos = undefined + return + } + e.preventDefault() + }} +/> +
(open = false) }}> {#if clearable && value !== undefined}
@@ -84,7 +115,7 @@ placeholder={valueEntry?.label ?? placeholder} class={twMerge(open ? '' : 'cursor-pointer', valueEntry ? 'placeholder-primary' : '')} autocomplete="off" - onfocus={() => (open = true)} + onpointerdown={() => (open = true)} />
{#if open} @@ -105,6 +136,7 @@