From 6158a1669aad1fccd9dc67fd43472ec6aa4f10d1 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Sun, 24 Sep 2023 21:12:33 +0200
Subject: [PATCH] feat: allow middle clicks to open search suggestions in new
 tab

---
 src/components/NavBar.vue            |  4 +++-
 src/components/SearchSuggestions.vue | 23 +++++++++--------------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 6116a858..df3fdaff 100644
--- a/src/components/NavBar.vue
+++ b/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;
diff --git a/src/components/SearchSuggestions.vue b/src/components/SearchSuggestions.vue
index a2cb1f5a..fa3d2e54 100644
--- a/src/components/SearchSuggestions.vue
+++ b/src/components/SearchSuggestions.vue
@@ -1,15 +1,14 @@
 <template>
     <div class="suggestions-container absolute">
         <ul>
-            <li
-                v-for="(suggestion, i) in searchSuggestions"
-                :key="i"
-                class="suggestion"
-                :class="{ 'suggestion-selected': selected === i }"
-                @mouseover="onMouseOver(i)"
-                @mousedown.stop="onClick(i)"
-                v-text="suggestion"
-            />
+            <li v-for="(suggestion, i) in searchSuggestions" :key="i" @mouseover="onMouseOver(i)">
+                <router-link
+                    class="suggestion"
+                    :class="{ 'suggestion-selected': selected === i }"
+                    :to="`/results?search_query=${encodeURIComponent(suggestion)}`"
+                    >{{ suggestion }}</router-link
+                >
+            </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>