Merge remote-tracking branch 'origin/keyboard-navigation-on-power-search'

packages/hoppscotch-app/components/app/Fuse.vue

@@ -7,6 +7,7 @@
       :active="shortcutIndex === selectedEntry"
       :shortcut="shortcut.item"
       @action="$emit('action', shortcut.item.action)"
+      @mouseover.native="selectedEntry = shortcutIndex"
     />
     <div
       v-if="searchResults.length === 0"
@@ -21,12 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  computed,
-  onUnmounted,
-  onMounted,
-  getCurrentInstance,
-} from "@nuxtjs/composition-api"
+import { computed, onUnmounted, onMounted } from "@nuxtjs/composition-api"
 import Fuse from "fuse.js"
 import { useArrowKeysNavigation } from "~/helpers/powerSearchNavigation"
 import { HoppAction } from "~/helpers/actions"
@@ -36,6 +32,10 @@ const props = defineProps<{
   search: string
 }>()
 
+const emit = defineEmits<{
+  (e: "action", action: HoppAction): void
+}>()
+
 const options = {
   keys: ["keys", "label", "action", "tags"],
 }
@@ -48,10 +48,7 @@ const searchResultsItems = computed(() =>
   searchResults.value.map((searchResult: any) => searchResult.item)
 )
 
-const currentInstance = getCurrentInstance()
-
-const emitSearchAction = (action: HoppAction) =>
-  currentInstance.emit("action", action)
+const emitSearchAction = (action: HoppAction) => emit("action", action)
 
 const { bindArrowKeysListerners, unbindArrowKeysListerners, selectedEntry } =
   useArrowKeysNavigation(searchResultsItems, {

packages/hoppscotch-app/components/app/PowerSearch.vue

@@ -49,6 +49,7 @@
             :shortcut="shortcut"
             :active="shortcutsItems.indexOf(shortcut) === selectedEntry"
             @action="runAction"
+            @mouseover.native="selectedEntry = shortcutsItems.indexOf(shortcut)"
           />
         </div>
       </div>

packages/hoppscotch-app/components/app/PowerSearchEntry.vue

@@ -8,36 +8,22 @@
       transition
       items-center
       group
-      hover:bg-primaryLight
       focus:outline-none
       focus-visible:bg-primaryLight
       search-entry
     "
-    :class="{ active, 'outline-none': active, 'focus-visible': active }"
-    tabindex="0"
+    :class="{ active, 'focus-visible': active }"
+    tabindex="-1"
     @click="$emit('action', shortcut.action)"
     @keydown.enter="$emit('action', shortcut.action)"
   >
     <SmartIcon
-      class="
-        mr-4
-        opacity-50
-        transition
-        svg-icons
-        group-hover:text-secondaryDark group-hover:opacity-100
-        group-focus:opacity-100
-      "
-      :class="{ 'opacity-100': active, 'text-secondaryDark': active }"
+      class="mr-4 opacity-50 transition svg-icons group-focus:opacity-100"
+      :class="{ 'opacity-100 text-secondaryDark': active }"
       :name="shortcut.icon"
     />
     <span
-      class="
-        flex flex-1
-        mr-4
-        transition
-        group-hover:text-secondaryDark
-        group-focus:text-secondaryDark
-      "
+      class="flex flex-1 mr-4 transition"
       :class="{ 'text-secondaryDark': active }"
     >
       {{ $t(shortcut.label) }}
@@ -76,8 +62,6 @@ defineProps<{
     content: "";
   }
 
-  &:hover::after,
-  &:focus::after,
   &.active::after {
     @apply bg-accentLight;
   }