diff --git a/src/components/Filters/DimensionFilter.tsx b/src/components/Filters/DimensionFilter.tsx index 5677d39e..fdd1a391 100644 --- a/src/components/Filters/DimensionFilter.tsx +++ b/src/components/Filters/DimensionFilter.tsx @@ -84,8 +84,19 @@ const DimensionFilter: FC = ({ }); }; - const handleSelectionChange = (e: React.ChangeEvent) => { - const newMultiSelect: string[] = e.target.value.split(','); + const handleSelectionChange = ( + selection: React.ChangeEvent | string + ) => { + let newMultiSelect: string[] = []; + if (typeof selection === 'string') { + newMultiSelect = selectedKeys.includes(selection) + ? selectedKeys.filter((key) => key !== selection) + : [...selectedKeys, selection]; + } else { + if (selection.target.value !== '') { + newMultiSelect = selection.target.value.split(','); + } + } setSelectedKeys(newMultiSelect); dispatch({ type: 'SET_DIMENSIONS', diff --git a/src/components/Filters/MultiSelect.tsx b/src/components/Filters/MultiSelect.tsx index c433778b..5d9b93b2 100644 --- a/src/components/Filters/MultiSelect.tsx +++ b/src/components/Filters/MultiSelect.tsx @@ -14,7 +14,9 @@ type MultiSelectProps = { options: any[]; selectedKeys: string[]; toggleDimension: (dimension: string) => void; - handleSelectionChange: (e: React.ChangeEvent) => void; + handleSelectionChange: ( + selection: React.ChangeEvent | string + ) => void; }; const MultiSelect: FC = ({ @@ -24,12 +26,6 @@ const MultiSelect: FC = ({ toggleDimension, handleSelectionChange, }) => { - const multiSelectOptions = options.filter((option) => { - if (!selectedKeys.includes(option)) { - return option; - } - }); - return (
= ({ key={index} classNames={{ base: 'multiSelectChip' }} endContent={} - onClose={() => toggleDimension(option)} + onClose={() => handleSelectionChange(option)} > {option} @@ -61,7 +57,7 @@ const MultiSelect: FC = ({ }} onChange={handleSelectionChange} > - {multiSelectOptions.map((option) => ( + {options.map((option) => (