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

@@ -174,6 +174,7 @@ const GenericCriterionEditor: React.FC<IGenericCriterionEditor> = ({
         <CountrySelect
           value={criterion.value}
           onChange={(v) => onValueChanged(v)}
+          menuPortalTarget={document.body}
         />
       );
     }

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}

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}
     />
   );
 };

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) {