diff --git a/src/components/multiselect/Multiselect.tsx b/src/components/multiselect/Multiselect.tsx index e547282731..88f28946bf 100644 --- 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 = ({ 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 = ({ allOptions, selectedItems, setSelectedItems, - addNewSelectedItem + handleSelectedItems ); return ( diff --git a/src/components/multiselect/helper.ts b/src/components/multiselect/helper.ts index 15b6357174..f4979af1f5 100644 --- 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: