Add close action to token dropdowns

src/components/SearchComponent.vue

@@ -11,6 +11,7 @@ import type { ValidDeposit } from "@/model/ValidDeposit";
 import { decimalCount } from "@/utils/decimalCount";
 import SpinnerComponent from "./SpinnerComponent.vue";
 import { getTokenImage } from "@/utils/imagesPath";
+import { onClickOutside } from "@vueuse/core";
 
 import { TokenEnum } from "@/model/NetworkEnum";
 
@@ -27,6 +28,9 @@ const {
   loadingNetworkLiquidity,
 } = storeToRefs(etherStore);
 
+// html references
+const tokenDropdownRef = ref<any>(null);
+
 // Reactive state
 const tokenValue = ref<number>(0);
 const enableConfirmButton = ref<boolean>(false);
@@ -75,6 +79,10 @@ const openTokenSelection = (): void => {
   selectTokenToggle.value = true;
 };
 
+onClickOutside(tokenDropdownRef, () => {
+  selectTokenToggle.value = false;
+});
+
 const handleSelectedToken = (token: TokenEnum): void => {
   etherStore.setSelectedToken(token);
   selectTokenToggle.value = false;
@@ -167,6 +175,7 @@ watch(walletAddress, (): void => {
           <div class="relative">
             <button
               class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
+              ref="tokenDropdownRef"
               @click="openTokenSelection()"
             >
               <img

src/components/SellerSteps/WantSellComponent.vue

@@ -9,6 +9,10 @@ import { storeToRefs } from "pinia";
 import { connectProvider } from "@/blockchain/provider";
 import { TokenEnum } from "@/model/NetworkEnum";
 import { getTokenImage } from "@/utils/imagesPath";
+import { onClickOutside } from "@vueuse/core";
+
+// html references
+const tokenDropdownRef = ref<any>(null);
 
 // Reactive state
 const etherStore = useEtherStore();
@@ -59,6 +63,10 @@ const openTokenSelection = (): void => {
   selectTokenToggle.value = true;
 };
 
+onClickOutside(tokenDropdownRef, () => {
+  selectTokenToggle.value = false;
+});
+
 const handleSelectedToken = (token: TokenEnum): void => {
   etherStore.setSelectedToken(token);
   selectTokenToggle.value = false;
@@ -108,6 +116,7 @@ const handleButtonClick = async (
           />
           <div class="relative">
             <button
+              ref="tokenDropdownRef"
               class="flex flex-row p-2 px-3 bg-gray-300 rounded-3xl min-w-fit gap-1"
               @click="openTokenSelection()"
             >