From 9a24e6356ebaee6ede0ff96707644307094ba3ff Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Fri, 17 Mar 2023 15:08:20 +1100
Subject: [PATCH] Filter edit fixes (#3556)

* Fix country selector dropdown
* Don't include search term in filter count
* Use info colour for filter button count pill
---
 ui/v2.5/src/components/List/CriterionEditor.tsx      | 1 +
 ui/v2.5/src/components/List/Filters/FilterButton.tsx | 2 +-
 ui/v2.5/src/components/Shared/CountrySelect.tsx      | 3 +++
 ui/v2.5/src/models/list-filter/filter.ts             | 8 ++------
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/ui/v2.5/src/components/List/CriterionEditor.tsx b/ui/v2.5/src/components/List/CriterionEditor.tsx
index 1c67cf977..bdb09b221 100644
--- a/ui/v2.5/src/components/List/CriterionEditor.tsx
+++ b/ui/v2.5/src/components/List/CriterionEditor.tsx
@@ -174,6 +174,7 @@ const GenericCriterionEditor: React.FC<IGenericCriterionEditor> = ({
         <CountrySelect
           value={criterion.value}
           onChange={(v) => onValueChanged(v)}
+          menuPortalTarget={document.body}
         />
       );
     }
diff --git a/ui/v2.5/src/components/List/Filters/FilterButton.tsx b/ui/v2.5/src/components/List/Filters/FilterButton.tsx
index ac41fe985..0b4d4453d 100644
--- a/ui/v2.5/src/components/List/Filters/FilterButton.tsx
+++ b/ui/v2.5/src/components/List/Filters/FilterButton.tsx
@@ -19,7 +19,7 @@ export const FilterButton: React.FC<IFilterButtonProps> = ({
     <Button variant="secondary" className="filter-button" onClick={onClick}>
       <Icon icon={faFilter} />
       {count ? (
-        <Badge pill variant="danger">
+        <Badge pill variant="info">
           {count}
         </Badge>
       ) : undefined}
diff --git a/ui/v2.5/src/components/Shared/CountrySelect.tsx b/ui/v2.5/src/components/Shared/CountrySelect.tsx
index bd93b4113..659731725 100644
--- a/ui/v2.5/src/components/Shared/CountrySelect.tsx
+++ b/ui/v2.5/src/components/Shared/CountrySelect.tsx
@@ -11,6 +11,7 @@ interface IProps {
   className?: string;
   showFlag?: boolean;
   isClearable?: boolean;
+  menuPortalTarget?: HTMLElement | null;
 }
 
 export const CountrySelect: React.FC<IProps> = ({
@@ -20,6 +21,7 @@ export const CountrySelect: React.FC<IProps> = ({
   isClearable = true,
   showFlag,
   className,
+  menuPortalTarget,
 }) => {
   const { locale } = useIntl();
   const options = getCountries(locale);
@@ -44,6 +46,7 @@ export const CountrySelect: React.FC<IProps> = ({
         IndicatorSeparator: null,
       }}
       className={`CountrySelect ${className}`}
+      menuPortalTarget={menuPortalTarget}
     />
   );
 };
diff --git a/ui/v2.5/src/models/list-filter/filter.ts b/ui/v2.5/src/models/list-filter/filter.ts
index 6aff929ca..e20fd5935 100644
--- a/ui/v2.5/src/models/list-filter/filter.ts
+++ b/ui/v2.5/src/models/list-filter/filter.ts
@@ -77,12 +77,8 @@ export class ListFilterModel {
 
   // returns the number of filters applied
   public count() {
-    const count = this.criteria.length;
-    if (this.searchTerm) {
-      return count + 1;
-    }
-
-    return count;
+    // don't include search term
+    return this.criteria.length;
   }
 
   public configureFromDecodedParams(params: IDecodedParams) {