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

This commit is contained in:
Bnyro 2023-09-24 21:12:33 +02:00
parent 3cfae88dbc
commit 6158a1669a
2 changed files with 12 additions and 15 deletions

View File

@ -183,7 +183,9 @@ export default {
this.suggestionsVisible = true; this.suggestionsVisible = true;
}, },
onInputBlur() { 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) { onSearchTextChange(searchText) {
this.searchText = searchText; this.searchText = searchText;

View File

@ -1,15 +1,14 @@
<template> <template>
<div class="suggestions-container absolute"> <div class="suggestions-container absolute">
<ul> <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> </ul>
</div> </div>
</template> </template>
@ -71,10 +70,6 @@ export default {
}, },
onClick(i) { onClick(i) {
this.setSelected(i); this.setSelected(i);
this.$router.push({
name: "SearchResults",
query: { search_query: this.searchSuggestions[i] },
});
}, },
setSelected(val) { setSelected(val) {
this.selected = val; this.selected = val;
@ -102,6 +97,6 @@ export default {
} }
.suggestion { .suggestion {
@apply p-1; @apply block w-full p-1;
} }
</style> </style>