Merge pull request #866 from CodeForPhilly/staging

Deploy Staging to Main branch (bugfix)
CodeForPhilly · Aug 8, 2024 · 477e0f0 · 477e0f0
2 parents 070084c + 4373dde
commit 477e0f0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/src/components/Filters/DimensionFilter.tsx b/src/components/Filters/DimensionFilter.tsx
@@ -84,8 +84,19 @@ const DimensionFilter: FC<DimensionFilterProps> = ({
     });
   };
 
-  const handleSelectionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const newMultiSelect: string[] = e.target.value.split(',');
+  const handleSelectionChange = (
+    selection: React.ChangeEvent<HTMLSelectElement> | 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
@@ -14,7 +14,9 @@ type MultiSelectProps = {
   options: any[];
   selectedKeys: string[];
   toggleDimension: (dimension: string) => void;
-  handleSelectionChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  handleSelectionChange: (
+    selection: React.ChangeEvent<HTMLSelectElement> | string
+  ) => void;
 };
 
 const MultiSelect: FC<MultiSelectProps> = ({
@@ -24,12 +26,6 @@ const MultiSelect: FC<MultiSelectProps> = ({
   toggleDimension,
   handleSelectionChange,
 }) => {
-  const multiSelectOptions = options.filter((option) => {
-    if (!selectedKeys.includes(option)) {
-      return option;
-    }
-  });
-
   return (
     <div className="space-x-2 min-h-[33.5px]">
       <SelectFilter
@@ -51,7 +47,7 @@ const MultiSelect: FC<MultiSelectProps> = ({
                   key={index}
                   classNames={{ base: 'multiSelectChip' }}
                   endContent={<X aria-label={`close ${option}`} />}
-                  onClose={() => toggleDimension(option)}
+                  onClose={() => handleSelectionChange(option)}
                 >
                   {option}
                 </SelectFilterChip>
@@ -61,7 +57,7 @@ const MultiSelect: FC<MultiSelectProps> = ({
         }}
         onChange={handleSelectionChange}
       >
-        {multiSelectOptions.map((option) => (
+        {options.map((option) => (
           <SelectFilterItem
             key={option}
             value={option}