fix: allow clicking and scrolling autocompleted servers (#610)

This commit is contained in:
Daniel Roe 2022-12-28 15:56:08 +01:00 committed by GitHub
parent 377072bea7
commit d569754b09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 5 deletions

View File

@ -62,8 +62,12 @@ const filteredServers = $computed(() => {
return results
})
function toSelector(server: string) {
return server.replace(/[^\w-]/g, '-')
}
function move(delta: number) {
autocompleteIndex = ((autocompleteIndex + delta) + filteredServers.length) % filteredServers.length
document.querySelector(`#${toSelector(filteredServers[autocompleteIndex])}`)?.scrollIntoView(false)
}
function onEnter(e: KeyboardEvent) {
@ -74,6 +78,10 @@ function onEnter(e: KeyboardEvent) {
}
}
function select(index: number) {
server = filteredServers[index]
}
onMounted(async () => {
input?.focus()
knownServers = await $fetch('/api/list-servers')
@ -111,24 +119,27 @@ onMounted(async () => {
@keydown.up="move(-1)"
@keydown.enter="onEnter"
@keydown.esc.prevent="autocompleteShow = false"
@blur="autocompleteShow = false"
@focus="autocompleteShow = true"
>
<div
v-if="autocompleteShow && filteredServers.length"
absolute left-6em right-0 top="100%"
bg-base rounded border="~ base"
text-left z-10 shadow of-auto
z-10 shadow of-auto
overflow-y-auto
class="max-h-[8rem]"
>
<div
<button
v-for="name, idx in filteredServers"
:id="toSelector(name)"
:key="name"
:value="name"
px-2 py1 font-mono
px-2 py1 font-mono w-full text-left
:class="autocompleteIndex === idx ? 'text-primary font-bold' : null"
@click="select(idx)"
>
{{ name }}
</div>
</button>
</div>
</div>
<div min-h-4>