From 74940664a5fd4108374e3c03df6edd66593d85bd Mon Sep 17 00:00:00 2001
From: Pietro <pietro.maxim.official@protonmail.com>
Date: Thu, 19 Sep 2024 12:37:50 +0200
Subject: [PATCH] chore: close dropdown after click on token and keep open if
 category clicked

---
 .../AssetDropdownWithFilters.tsx                      | 11 ++++++++++-
 packages/ui/src/1_atoms/FilterPill/FilterPill.tsx     |  4 ++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/app/5_pages/ConvertPage/components/AssetDropdownWithFilters/AssetDropdownWithFilters.tsx b/apps/frontend/src/app/5_pages/ConvertPage/components/AssetDropdownWithFilters/AssetDropdownWithFilters.tsx
index 869c80695..3324f525d 100644
--- a/apps/frontend/src/app/5_pages/ConvertPage/components/AssetDropdownWithFilters/AssetDropdownWithFilters.tsx
+++ b/apps/frontend/src/app/5_pages/ConvertPage/components/AssetDropdownWithFilters/AssetDropdownWithFilters.tsx
@@ -50,6 +50,14 @@ export const AssetDropdownWithFilters: FC<AssetDropdownWithFiltersProps> = ({
     [currentChainId],
   );
 
+  const handleCategoryClick = useCallback(
+    (e: React.MouseEvent, category: CategoryType) => {
+      e.stopPropagation();
+      onCategorySelect(category);
+    },
+    [onCategorySelect],
+  );
+
   return (
     <Dropdown
       text={getAssetRenderer(token)}
@@ -57,6 +65,7 @@ export const AssetDropdownWithFilters: FC<AssetDropdownWithFiltersProps> = ({
       dropdownClassName="max-h-[12rem] sm:max-h-[14.5rem] border border-gray-70 rounded min-w-48"
       mode={DropdownMode.right}
       dataAttribute={dataAttribute}
+      closeOnClick
     >
       <div className="items-center flex-wrap bg-gray-80 p-3 grid grid-cols-2 gap-2">
         {Object.values(CategoryType).map(category => (
@@ -64,7 +73,7 @@ export const AssetDropdownWithFilters: FC<AssetDropdownWithFiltersProps> = ({
             text={category}
             key={category}
             isActive={selectedCategories.includes(category)}
-            onClick={() => onCategorySelect(category)}
+            onClick={e => handleCategoryClick(e, category)}
           />
         ))}
       </div>
diff --git a/packages/ui/src/1_atoms/FilterPill/FilterPill.tsx b/packages/ui/src/1_atoms/FilterPill/FilterPill.tsx
index ec160ccaf..3c0439acf 100644
--- a/packages/ui/src/1_atoms/FilterPill/FilterPill.tsx
+++ b/packages/ui/src/1_atoms/FilterPill/FilterPill.tsx
@@ -10,14 +10,14 @@ type FilterPillProps = {
   dataAttribute?: string;
   className?: string;
   isActive?: boolean;
-  onClick?: () => void;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 };
 
 export const FilterPill: FC<FilterPillProps> = ({
   text,
   dataAttribute,
   className,
-  isActive,
+  isActive = false,
   onClick,
 }) => (
   <button