feat: allow middle clicks to open search suggestions in new tab

src/components/NavBar.vue

@@ -183,7 +183,9 @@ export default {
             this.suggestionsVisible = true;
         },
         onInputBlur() {
-            this.suggestionsVisible = false;
+            // the search suggestions will be hidden after some seconds
+            // otherwise anchor links won't work!
+            setTimeout(() => (this.suggestionsVisible = false), 200);
         },
         onSearchTextChange(searchText) {
             this.searchText = searchText;

src/components/SearchSuggestions.vue

@@ -1,15 +1,14 @@
 <template>
     <div class="suggestions-container absolute">
         <ul>
-            <li
+            <li v-for="(suggestion, i) in searchSuggestions" :key="i" @mouseover="onMouseOver(i)">
-                v-for="(suggestion, i) in searchSuggestions"
+                <router-link
-                :key="i"
+                    class="suggestion"
-                class="suggestion"
+                    :class="{ 'suggestion-selected': selected === i }"
-                :class="{ 'suggestion-selected': selected === i }"
+                    :to="`/results?search_query=${encodeURIComponent(suggestion)}`"
-                @mouseover="onMouseOver(i)"
+                    >{{ suggestion }}</router-link
-                @mousedown.stop="onClick(i)"
+                >
-                v-text="suggestion"
+            </li>
-            />
         </ul>
     </div>
 </template>
@@ -71,10 +70,6 @@ export default {
         },
         onClick(i) {
             this.setSelected(i);
-            this.$router.push({
-                name: "SearchResults",
-                query: { search_query: this.searchSuggestions[i] },
-            });
         },
         setSelected(val) {
             this.selected = val;
@@ -102,6 +97,6 @@ export default {
 }
 
 .suggestion {
-    @apply p-1;
+    @apply block w-full p-1;
 }
 </style>