fix: prevent suggestion dropdown from closing when clicking scrollbar

Author: iiio2

app/components/Compare/PackageSelector.vue

@@ -183,18 +183,12 @@ watch(highlightedIndex, index => {
   }
 })
 
-const { start, stop } = useTimeoutFn(() => {
-  isInputFocused.value = false
-}, 200)
-
-function handleBlur() {
-  start()
-}
+const containerRef = useTemplateRef('containerRef')
 
-function handleFocus() {
-  stop()
-  isInputFocused.value = true
-}
+onClickOutside(containerRef, () => {
+  isInputFocused.value = false
+  highlightedIndex.value = -1
+})
 </script>
 
 <template>
@@ -226,7 +220,7 @@ function handleFocus() {
     </div>
 
     <!-- Add package input -->
-    <div v-if="packages.length < maxPackages" class="relative">
+    <div v-if="packages.length < maxPackages" ref="containerRef" class="relative">
       <div class="relative group flex items-center">
         <label for="package-search" class="sr-only">
           {{ $t('compare.selector.search_label') }}
@@ -249,8 +243,8 @@ function handleFocus() {
           size="medium"
           class="w-full min-w-25 ps-7"
           aria-autocomplete="list"
-          @focus="handleFocus"
-          @blur="handleBlur"
+          ref="inputRef"
+          @focus="isInputFocused = true"
           @keydown="handleKeydown"
         />
       </div>