fix: 🐛 filter selection (#475)

Author: harshzalavadiya

README.md

@@ -70,7 +70,6 @@ More examples can be found [here ↗](./docs/recipes)
 | `overrideStrings`     | [localization ↗](docs/recipes/localization.md)                                                                                                    | `object`                     |                |
 | `onChange`            | onChange callback                                                                                                                                 | `function`                   |                |
 | `disabled`            | disable dropdown                                                                                                                                  | `boolean`                    | `false`        |
-| `selectAllLabel`      | _select all_ label                                                                                                                                | `string`                     |                |
 | `disableSearch`       | hide search textbox                                                                                                                               | `boolean`                    | `false`        |
 | `filterOptions`       | [custom filter options (async supported) ↗](docs/recipes/custom-filter.md)                                                                        | `function`                   | Fuzzy Search   |
 | `className`           | class name for parent component                                                                                                                   | `string`                     | `multi-select` |

src/hooks/use-multi-select.tsx

@@ -10,6 +10,7 @@ const defaultStrings = {
   noOptions: "No options",
   search: "Search",
   selectAll: "Select All",
+  selectAllFiltered: "Select All (Filtered)",
   selectSomeItems: "Select...",
   create: "Create",
 };

src/lib/interfaces.ts

@@ -14,7 +14,6 @@ export interface ISelectProps {
   valueRenderer?: (selected: Option[], options: Option[]) => ReactNode;
   ItemRenderer?;
   ArrowRenderer?: ({ expanded }) => JSX.Element;
-  selectAllLabel?: string;
   isLoading?: boolean;
   disabled?: boolean;
   disableSearch?: boolean;

src/select-panel/index.tsx

@@ -33,7 +33,6 @@ const SelectPanel = () => {
     setOptions,
     value,
     filterOptions: customFilterOptions,
-    selectAllLabel,
     ItemRenderer,
     disabled,
     disableSearch,
@@ -65,7 +64,7 @@ const SelectPanel = () => {
   }, [disableSearch, hasSelectAll]);
 
   const selectAllOption = {
-    label: selectAllLabel || t("selectAll"),
+    label: searchText ? t("selectAllFiltered") : t("selectAll"),
     value: "",
   };
 
@@ -78,9 +77,7 @@ const SelectPanel = () => {
       const selectedValues = value.map((o) => o.value);
       const finalSelectedValues = [...selectedValues, ...filteredValues];
 
-      return filteredOptions.filter((o) =>
-        finalSelectedValues.includes(o.value)
-      );
+      return options.filter((o) => finalSelectedValues.includes(o.value));
     }
 
     return value.filter((o) => !filteredValues.includes(o.value));