From d569754b09b651af40648340448173291c76b587 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 28 Dec 2022 15:56:08 +0100
Subject: [PATCH] fix: allow clicking and scrolling autocompleted servers
 (#610)

---
 components/user/UserSignIn.vue | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/components/user/UserSignIn.vue b/components/user/UserSignIn.vue
index 75a23563..b729a3a4 100644
--- a/components/user/UserSignIn.vue
+++ b/components/user/UserSignIn.vue
@@ -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>