fix: suggestion menu on click outside

Author: zackha

components/AppHeader.vue

@@ -23,7 +23,7 @@
               <input
                 class="w-full bg-transparent py-2 outline-none placeholder:text-[#757575] placeholder:dark:text-neutral-500"
                 v-model="searchQuery"
-                @click.stop="suggestionMenu = true"
+                @click="suggestionMenu = !suggestionMenu"
                 :placeholder="route.query.category ? `Search in ${route.query.category}` : 'Search'" />
             </div>
             <div v-if="searchQuery || suggestionMenu" class="flex cursor-pointer text-black dark:text-neutral-500 transition-all" @click="clearSearch">
@@ -32,7 +32,7 @@
             </div>
           </div>
         </form>
-        <div v-if="suggestionMenu" id="suggestionMenu" class="absolute top-full left-0 right-0 z-50 bg-white rounded-b-2xl w-full">
+        <div v-if="suggestionMenu" ref="suggestionMenuRef" class="absolute top-full left-0 right-0 z-50 bg-white rounded-b-2xl w-full">
           <div class="m-8">
             <!-- Loading State -->
             <div v-if="loading">Loading...</div>
@@ -81,6 +81,7 @@
 import getSearchProducts from '~/gql/queries/getSearchProducts.gql';
 
 const suggestionMenu = ref(false);
+const suggestionMenuRef = ref(null);
 const router = useRouter();
 const route = useRoute();
 const searchQuery = ref(route.query.q);
@@ -98,22 +99,10 @@ const clearSearch = () => {
   setSearch();
 };
 
-const hidesuggestionMenu = () => {
-  suggestionMenu.value = false;
-  searchQuery.value = route.query.q;
-};
-
-const outsideClickHandler = (event) => {
-  if (!event.target.closest('#suggestionMenu')) {
-    hidesuggestionMenu();
+useOnClickOutside(suggestionMenuRef, () => {
+  if (suggestionMenu.value) {
+    suggestionMenu.value = false;
+    searchQuery.value = route.query.q;
   }
-};
-
-onMounted(() => {
-  window.addEventListener('click', outsideClickHandler);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('click', outsideClickHandler);
 });
 </script>

components/ButtonSelectCategory.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="relative cursor-pointer select-none items-center justify-center text-base font-semibold" ref="dropdownRef" @click="isDropdownVisible = !isDropdownVisible">
+  <div class="relative cursor-pointer select-none items-center justify-center text-base font-semibold" @click="isDropdownVisible = !isDropdownVisible">
     <div
       class="box-border flex items-center rounded-full py-3.5 pl-5 pr-4 transition-all active:scale-95"
       :class="{ 'bg-black text-white hover:bg-black': isDropdownVisible, 'bg-[#efefef] hover:bg-[#e2e2e2]': !isDropdownVisible }">
       <span class="mr-1.5">{{ route.query.category || 'All Categories' }}</span>
       <Icon name="iconamoon:arrow-down-2" size="24" />
     </div>
     <Transition>
-      <div v-if="isDropdownVisible" id="dropdown" class="absolute top-full z-10 mt-[18px] rounded-2xl text-base font-semibold bg-white shadow-[0_0_8px_rgba(0,0,0,.1)]">
+      <div v-if="isDropdownVisible" ref="dropdownRef" class="absolute top-full z-10 mt-[18px] rounded-2xl text-base font-semibold bg-white shadow-[0_0_8px_rgba(0,0,0,.1)]">
         <div class="m-2 w-44">
           <div @click="setCategory()" class="rounded-lg px-3 py-2 transition-all duration-300 hover:bg-[#e9e9e9]">
             <div class="flex items-center justify-between">

components/ButtonSortBy.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="relative cursor-pointer select-none items-center justify-center text-base font-semibold" ref="dropdownRef" @click="isDropdownVisible = !isDropdownVisible">
+  <div class="relative cursor-pointer select-none items-center justify-center text-base font-semibold" @click="isDropdownVisible = !isDropdownVisible">
     <div
       class="box-border flex items-center rounded-full py-3.5 pl-5 pr-4 transition-all active:scale-95"
       :class="{ 'bg-black text-white hover:bg-black': isDropdownVisible, 'bg-[#efefef] hover:bg-[#e2e2e2]': !isDropdownVisible }">
       <span class="mr-1.5">{{ selectedSort }}</span>
       <Icon name="iconamoon:arrow-down-2" size="24" />
     </div>
     <Transition>
-      <div v-if="isDropdownVisible" id="dropdown" class="absolute top-full right-0 z-10 mt-[18px] rounded-2xl text-base font-semibold bg-white shadow-[0_0_8px_rgba(0,0,0,.1)]">
+      <div v-if="isDropdownVisible" ref="dropdownRef" class="absolute top-full right-0 z-10 mt-[18px] rounded-2xl text-base font-semibold bg-white shadow-[0_0_8px_rgba(0,0,0,.1)]">
         <div class="m-2 w-48">
           <div v-for="(option, i) in options" :key="i" @click="setSort(option.value)" class="rounded-lg px-3 py-2 transition-all duration-300 hover:bg-[#e9e9e9]">
             <div class="flex items-center justify-between">