From dd143c95a9fab56163ecf6bd6db7651e2639d88c Mon Sep 17 00:00:00 2001
From: Anwarul Islam <anwaarulislaam@gmail.com>
Date: Tue, 12 Sep 2023 13:12:44 +0600
Subject: [PATCH] fix: unusual behavior while scrolling through spotlight
 entries (#3324)

* fix: spotlight scroll issue

* fix: entry hidden issue

* chore: back to loop mode
---
 .../src/components/app/spotlight/Entry.vue    | 12 ++++++-----
 .../src/components/app/spotlight/index.vue    | 20 ++++++++++++++++++-
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/app/spotlight/Entry.vue b/packages/hoppscotch-common/src/components/app/spotlight/Entry.vue
index 3312c87f7..8473e1927 100644
--- a/packages/hoppscotch-common/src/components/app/spotlight/Entry.vue
+++ b/packages/hoppscotch-common/src/components/app/spotlight/Entry.vue
@@ -80,11 +80,10 @@ const props = defineProps<{
   active: boolean
 }>()
 
-const formattedShortcutKeys = computed(
-  () =>
-    props.entry.meta?.keyboardShortcut?.map((key) => {
-      return SPECIAL_KEY_CHARS[key] ?? capitalize(key)
-    })
+const formattedShortcutKeys = computed(() =>
+  props.entry.meta?.keyboardShortcut?.map((key) => {
+    return SPECIAL_KEY_CHARS[key] ?? capitalize(key)
+  })
 )
 
 const emit = defineEmits<{
@@ -119,5 +118,8 @@ watch(
   &.active {
     @apply after:bg-accentLight;
   }
+
+  scroll-padding: 4rem !important;
+  scroll-margin: 4rem !important;
 }
 </style>
diff --git a/packages/hoppscotch-common/src/components/app/spotlight/index.vue b/packages/hoppscotch-common/src/components/app/spotlight/index.vue
index 95e575a1e..d79f5de19 100644
--- a/packages/hoppscotch-common/src/components/app/spotlight/index.vue
+++ b/packages/hoppscotch-common/src/components/app/spotlight/index.vue
@@ -40,7 +40,7 @@
             :key="`result-${result.id}`"
             :entry="result"
             :active="isEqual(selectedEntry, [sectionIndex, entryIndex])"
-            @mouseover="selectedEntry = [sectionIndex, entryIndex]"
+            @mouseover="onMouseOver($event, sectionIndex, entryIndex)"
             @action="runAction(sectionID, result)"
           />
         </div>
@@ -178,6 +178,24 @@ function runAction(searcherID: string, result: SpotlightSearcherResult) {
   emit("hide-modal")
 }
 
+let lastMousePosition: { x: number; y: number }
+
+const onMouseOver = (
+  e: MouseEvent,
+  sectionIndex: number,
+  entryIndex: number
+) => {
+  const mousePosition = {
+    x: e.clientX,
+    y: e.clientY,
+  }
+
+  // if the position is same, do nothing
+  if (isEqual(lastMousePosition, mousePosition)) return
+  selectedEntry.value = [sectionIndex, entryIndex]
+  lastMousePosition = mousePosition
+}
+
 function newUseArrowKeysForNavigation() {
   const selectedEntry = ref<[number, number]>([0, 0]) // [sectionIndex, entryIndex]