From 1c51f8b32e1a6c1c0b7af52c68f60be3679239cd Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 19 Oct 2021 14:42:39 +0530
Subject: [PATCH] fix: bug with search box key listeners still active after
 close

---
 packages/hoppscotch-app/components/app/Fuse.vue  |  8 ++++++--
 packages/hoppscotch-app/components/app/Logo.vue  |  1 +
 .../components/app/PowerSearch.vue               | 16 ++++++++++------
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/hoppscotch-app/components/app/Fuse.vue b/packages/hoppscotch-app/components/app/Fuse.vue
index 6f0d138e0..3b018e93f 100644
--- a/packages/hoppscotch-app/components/app/Fuse.vue
+++ b/packages/hoppscotch-app/components/app/Fuse.vue
@@ -56,7 +56,11 @@ const { bindArrowKeysListerners, unbindArrowKeysListerners, selectedEntry } =
     stopPropagation: true,
   })
 
-onMounted(bindArrowKeysListerners)
+onMounted(() => {
+  bindArrowKeysListerners()
+})
 
-onUnmounted(unbindArrowKeysListerners)
+onUnmounted(() => {
+  unbindArrowKeysListerners()
+})
 </script>
diff --git a/packages/hoppscotch-app/components/app/Logo.vue b/packages/hoppscotch-app/components/app/Logo.vue
index d59f2d3fb..ae21787eb 100644
--- a/packages/hoppscotch-app/components/app/Logo.vue
+++ b/packages/hoppscotch-app/components/app/Logo.vue
@@ -26,6 +26,7 @@
   0% {
     @apply opacity-0;
   }
+
   100% {
     @apply opacity-100;
   }
diff --git a/packages/hoppscotch-app/components/app/PowerSearch.vue b/packages/hoppscotch-app/components/app/PowerSearch.vue
index 51cf7b7e5..c24d7e321 100644
--- a/packages/hoppscotch-app/components/app/PowerSearch.vue
+++ b/packages/hoppscotch-app/components/app/PowerSearch.vue
@@ -23,7 +23,7 @@
         "
       />
       <AppFuse
-        v-if="search"
+        v-if="search && show"
         :input="fuse"
         :search="search"
         @action="runAction"
@@ -58,12 +58,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onUnmounted, onMounted } from "@nuxtjs/composition-api"
+import { ref, computed, watch } from "@nuxtjs/composition-api"
 import { HoppAction, invokeAction } from "~/helpers/actions"
 import { spotlight as mappings, fuse } from "~/helpers/shortcuts"
 import { useArrowKeysNavigation } from "~/helpers/powerSearchNavigation"
 
-defineProps<{
+const props = defineProps<{
   show: boolean
 }>()
 
@@ -95,7 +95,11 @@ const { bindArrowKeysListerners, unbindArrowKeysListerners, selectedEntry } =
     onEnter: runAction,
   })
 
-onMounted(bindArrowKeysListerners)
-
-onUnmounted(unbindArrowKeysListerners)
+watch(
+  () => props.show,
+  (show) => {
+    if (show) bindArrowKeysListerners()
+    else unbindArrowKeysListerners()
+  }
+)
 </script>