From ee78c63afa68c0c70c3c9206e22820200eac4d8f Mon Sep 17 00:00:00 2001
From: mirkobrombin <send@mirko.pm>
Date: Fri, 19 Jul 2024 22:50:03 +0200
Subject: [PATCH] fix: clicking on a search result closes the search without
 forwarding

---
 src/App.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index bf59271..1ab2b77 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,7 +12,8 @@
           <div v-if="collectionShortName"
             class="flex items-center border bg-gray-100 dark:bg-gray-700 rounded-lg overflow-hidden focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-opacity-50 border-gray-200 dark:border-gray-600">
             <input class="flex-1 px-4 py-2 text-gray-600 dark:text-gray-300 bg-transparent focus:outline-none w-full"
-              type="text" placeholder="Search for articles.." v-model="search" @input="searchArticles" @blur="emptySearch()">
+              type="text" placeholder="Search for articles.." v-model="search" @input="searchArticles"
+              @blur="emptySearch()">
             <i class="material-icons p-2 text-gray-400 dark:text-gray-500">search</i>
 
             <div v-if="collectionShortName" class="relative border-l border-gray-200 dark:border-gray-600">
@@ -37,7 +38,7 @@
           <div v-if="searchResponse.length > 0"
             class="absolute w-full mt-1 z-50 max-h-80 overflow-auto bg-white dark:bg-gray-800 rounded-md shadow-lg m-2">
             <span class="block p-4 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
-              v-for="(result, index) in searchResponse" :key="index" @click="goToArticle(result.Slug)">
+              v-for="(result, index) in searchResponse" :key="index" @mousedown.prevent="goToArticle(result.Slug)">
               <div class="flex items-center space-x-2">
                 <i class="mdi material-icons text-gray-500 dark:text-gray-400">book</i>
                 <div class="flex-1">
@@ -145,9 +146,9 @@ export default defineComponent({
         // @ts-ignore
         const response = await this.$chronosAPI.searchArticles(this.chronosStore.prefLang, this.search, this.collectionShortName);
         if (response != null) {
-            this.searchResponse = response;
+          this.searchResponse = response;
         } else {
-            this.searchResponse = [];
+          this.searchResponse = [];
         }
       } catch (error) {
         console.error("Error searching articles:", error);
@@ -181,8 +182,8 @@ export default defineComponent({
       this.isDarkMode = isDarkMode;
     },
     emptySearch() {
-        this.searchResponse = [];
-        console.log("Focus lost")
+      this.searchResponse = [];
+      console.log("Focus lost")
     },
   },
 });