Update external state of Multiselect on deselecting items in Adv.Search

danskernesdigitalebibliotek · Nov 10, 2023 · 6278d41 · 6278d41
1 parent d92b2ff
commit 6278d41
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 7 deletions.
diff --git a/src/components/multiselect/Multiselect.tsx b/src/components/multiselect/Multiselect.tsx
@@ -11,6 +11,7 @@ import {
   deselectMultiselectAllOption,
   selectMultiselectAllOption,
   selectMultiselectOption,
+  setMultiselectOptions,
   useGetMultiselectDownshiftProps
 } from "./helper";
 
@@ -53,11 +54,20 @@ const Multiselect: FC<MultiselectProps> = ({
   const { getDropdownProps, setSelectedItems, selectedItems } =
     useMultipleSelection({ initialSelectedItems: initialSelectedOptions });
 
-  const addNewSelectedItem = (
+  const handleSelectedItems = (
     allCurrentlySelected: MultiselectOption[],
-    newSelected: MultiselectOption,
+    newSelected: MultiselectOption | null,
     allPossibleOptions: number
   ) => {
+    // If newSelected doesn't exist, then we instead are removing an item
+    if (!newSelected) {
+      return setMultiselectOptions(
+        allCurrentlySelected,
+        updateState,
+        updateExternalState,
+        setSelectedItems
+      );
+    }
     // If new selection is not "all" we make sure "all" is deselected
     if (
       allCurrentlySelected.find((item) => item.value === allValue) &&
@@ -111,7 +121,7 @@ const Multiselect: FC<MultiselectProps> = ({
       allOptions,
       selectedItems,
       setSelectedItems,
-      addNewSelectedItem
+      handleSelectedItems
     );
 
   return (

diff --git a/src/components/multiselect/helper.ts b/src/components/multiselect/helper.ts
@@ -20,6 +20,20 @@ export const deselectMultiselectAllOption = (
   return newValue;
 };
 
+export const setMultiselectOptions = (
+  newSelected: MultiselectOption[],
+  updateState: (
+    updateKey: string | undefined,
+    value: MultiselectOption[]
+  ) => void,
+  updateExternalState: MultiselectExternalUpdate | undefined,
+  setSelectedItems: (items: MultiselectOption[]) => void
+) => {
+  updateState(updateExternalState?.key, newSelected);
+  setSelectedItems(newSelected);
+  return newSelected;
+};
+
 export const selectMultiselectAllOption = (
   updateState: (
     updateKey: string | undefined,
@@ -54,9 +68,9 @@ export const useGetMultiselectDownshiftProps = (
   allOptions: MultiselectOption[],
   selectedItems: MultiselectOption[],
   setSelectedItems: (items: MultiselectOption[]) => void,
-  addNewSelectedItem: (
+  handleSelectedItems: (
     allCurrentlySelected: MultiselectOption[],
-    newSelected: MultiselectOption,
+    newSelected: MultiselectOption | null,
     allPossibleOptions: number
   ) => MultiselectOption[]
 ) => {
@@ -90,7 +104,7 @@ export const useGetMultiselectDownshiftProps = (
             !selectedItems.find((item) => item.value === newSelectedItem.value)
           ) {
             setSelectedItems(
-              addNewSelectedItem(
+              handleSelectedItems(
                 selectedItems,
                 newSelectedItem,
                 allOptions.length
@@ -110,7 +124,9 @@ export const useGetMultiselectDownshiftProps = (
             const newSelectedItems = selectedItems.filter((item) => {
               return item.value !== newSelectedItem.value;
             });
-            setSelectedItems(newSelectedItems);
+            setSelectedItems(
+              handleSelectedItems(newSelectedItems, null, allOptions.length)
+            );
           }
           break;
         default: