chore: close dropdown after click on token and keep open if category …

…clicked

apps/frontend/src/app/5_pages/ConvertPage/components/AssetDropdownWithFilters/AssetDropdownWithFilters.tsx

@@ -50,21 +50,30 @@ export const AssetDropdownWithFilters: FC<AssetDropdownWithFiltersProps> = ({
     [currentChainId],
   );
 
+  const handleCategoryClick = useCallback(
+    (e: React.MouseEvent, category: CategoryType) => {
+      e.stopPropagation();
+      onCategorySelect(category);
+    },
+    [onCategorySelect],
+  );
+
   return (
     <Dropdown
       text={getAssetRenderer(token)}
       className="min-w-[6.7rem] flex-none border border-gray-70"
       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 => (
           <FilterPill
             text={category}
             key={category}
             isActive={selectedCategories.includes(category)}
-            onClick={() => onCategorySelect(category)}
+            onClick={e => handleCategoryClick(e, category)}
           />
         ))}
       </div>

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