FIX: GlobalSearch scroll follows keyboard selection

arrow keys + tab

frontend/src/components/GlobalSearch.vue

@@ -25,12 +25,14 @@
     </transition>
     <b-popover custom-class="popover-wide suggestions-popover shadow"
                :show="(search_has_focus) || searching !== 0"
+               id="suggestions-popover"
                target="search" placement="bottom">
       <div class="suggestions-wrapper">
         <div v-if="getSearchDiscriminator()" class="text-center suggestion p-3"><i>Globale Suche
           in </i><b>{{ getSearchDiscriminator() }}</b></div>
         <div v-for="(suggestion, index) in suggestions"
              :key="'search-suggestion-' + index"
+             :id="'search-suggestion-' + index"
              class="suggestion p-3"
              :class="index === keyboard_focus ? 'keyboard-focus':''"
              @click="suggestionClicked($event, suggestion)">
@@ -393,6 +395,15 @@ export default {
       if (this.suggestions.length > 0) {
         this.keyboard_focus += down ? 1 : -1
         this.keyboard_focus = Math.min(Math.max(this.keyboard_focus, -1), this.suggestions.length - 1)
+        if (this.keyboard_focus !== -1) {
+          const popover = document.getElementById('suggestions-popover')
+          const suggestion = document.getElementById('search-suggestion-' + this.keyboard_focus)
+          if (popover.scrollTop > suggestion.offsetTop) {
+            popover.scrollTop = suggestion.offsetTop
+          } else if (popover.scrollTop + popover.clientHeight < suggestion.offsetTop + suggestion.clientHeight) {
+            popover.scrollTop = suggestion.offsetTop + suggestion.clientHeight - popover.clientHeight
+          }
+        }
       }
     },
     searchKeyboardTab(e) {