fix: click outside to hide autocompleted servers

This commit is contained in:
三咲智子 2023-01-01 23:12:02 +08:00
parent 727d05915f
commit ca1b7169f1
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E

View file

@ -78,6 +78,13 @@ function onEnter(e: KeyboardEvent) {
} }
} }
function escapeAutocomplete(evt: KeyboardEvent) {
if (!autocompleteShow)
return
autocompleteShow = false
evt.stopPropagation()
}
function select(index: number) { function select(index: number) {
server = filteredServers[index] server = filteredServers[index]
} }
@ -87,6 +94,10 @@ onMounted(async () => {
knownServers = await $fetch('/api/list-servers') knownServers = await $fetch('/api/list-servers')
fuse = new Fuse(knownServers, { shouldSort: true }) fuse = new Fuse(knownServers, { shouldSort: true })
}) })
onClickOutside($$(input), () => {
autocompleteShow = false
})
</script> </script>
<template> <template>
@ -123,7 +134,7 @@ onMounted(async () => {
@keydown.down="move(1)" @keydown.down="move(1)"
@keydown.up="move(-1)" @keydown.up="move(-1)"
@keydown.enter="onEnter" @keydown.enter="onEnter"
@keydown.esc.prevent="autocompleteShow = false" @keydown.esc.prevent="escapeAutocomplete"
@focus="autocompleteShow = true" @focus="autocompleteShow = true"
> >
<div <div