fix: separator collides with space indicator

apps/client/src/common/components/view-params-editor/ParamInput.tsx

@@ -109,10 +109,8 @@ function MultiOption(props: EditFormMultiOptionProps) {
   const { paramField } = props;
   const { id, defaultValue } = paramField;
 
-  const optionFromParams = (searchParams.get(id) ?? '').toLocaleLowerCase();
-  const defaultOptionValue = optionFromParams || defaultValue?.toLocaleLowerCase() || '';
-
-  const [paramState, setParamState] = useState<string>(defaultOptionValue);
+  const optionFromParams = searchParams.getAll(id);
+  const [paramState, setParamState] = useState<string[]>(optionFromParams || defaultValue || ['']);
 
   return (
     <>
@@ -124,10 +122,8 @@ function MultiOption(props: EditFormMultiOptionProps) {
         <MenuList>
           <MenuOptionGroup
             type='checkbox'
-            value={paramState.split('_')}
-            onChange={(value) => {
-              setParamState(typeof value === 'object' ? value.filter((v) => v !== '').join('_') : value);
-            }}
+            value={paramState}
+            onChange={(value) => setParamState(Array.isArray(value) ? value : [value])}
           >
             {Object.values(paramField.values).map((option) => {
               const { value, label } = option;

apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx

@@ -55,10 +55,28 @@ const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ViewOp
       // unfortunately this means we run all the strings through the sanitation
       const valueWithoutHash = sanitiseColour(value);
       if (defaultValues[id] !== valueWithoutHash) {
-        newSearchParams.set(id, valueWithoutHash);
+        handleValueString(id, value);
       }
     }
   });
+
+  /** Utility function contains logic to add a value into the searchParams object */
+  function handleValueString(id: string, value: string) {
+    const maybeMultipleValues = value.split(',');
+
+    // we need to check if the value contains comma separated list, for the case of the multi-select data
+    if (Array.isArray(maybeMultipleValues) && maybeMultipleValues.length > 1) {
+      const added = new Set();
+      maybeMultipleValues.forEach((v) => {
+        if (!added.has(v)) {
+          added.add(v);
+          newSearchParams.append(id, v);
+        }
+      });
+    } else {
+      newSearchParams.set(id, value);
+    }
+  }
   return newSearchParams;
 };
 

apps/client/src/features/operator/Operator.tsx

@@ -114,10 +114,8 @@ export default function Operator() {
   // get fields which the user subscribed to
   const shouldEdit = searchParams.get('shouldEdit');
 
-  const subscriptions = (searchParams.get('subscribe') ?? '')
-    .split('_')
-    .filter((value) => Object.hasOwn(customFields, value));
-
+  // subscriptions is a MultiSelect and may have multiple values
+  const subscriptions = searchParams.getAll('subscribe').filter((value) => Object.hasOwn(customFields, value));
   const canEdit = shouldEdit && subscriptions;
 
   const main = searchParams.get('main') as keyof TitleFields | null;