fix: click outside to hide autocompleted servers

elk-zone · Jan 1, 2023 · ca1b716 · ca1b716
1 parent 727d059
commit ca1b716
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/components/user/UserSignIn.vue b/components/user/UserSignIn.vue
@@ -78,6 +78,13 @@ function onEnter(e: KeyboardEvent) {
   }
 }
 
+function escapeAutocomplete(evt: KeyboardEvent) {
+  if (!autocompleteShow)
+    return
+  autocompleteShow = false
+  evt.stopPropagation()
+}
+
 function select(index: number) {
   server = filteredServers[index]
 }
@@ -87,6 +94,10 @@ onMounted(async () => {
   knownServers = await $fetch('/api/list-servers')
   fuse = new Fuse(knownServers, { shouldSort: true })
 })
+
+onClickOutside($$(input), () => {
+  autocompleteShow = false
+})
 </script>
 
 <template>
@@ -123,7 +134,7 @@ onMounted(async () => {
           @keydown.down="move(1)"
           @keydown.up="move(-1)"
           @keydown.enter="onEnter"
-          @keydown.esc.prevent="autocompleteShow = false"
+          @keydown.esc.prevent="escapeAutocomplete"
           @focus="autocompleteShow = true"
         >
         <div