fix: multi select infinite loop

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

@@ -39,7 +39,14 @@ export default function ParamInput({ paramField }: ParamInputProps) {
   }
 
   if (type === 'multi-option') {
-    return <MultiOption paramField={paramField} />;
+    const optionFromParams = searchParams.getAll(id);
+
+    return (
+      <MultiOption
+        paramField={paramField}
+        options={optionFromParams.length ? optionFromParams : paramField.defaultValue ?? ['']}
+      />
+    );
   }
 
   if (type === 'boolean') {
@@ -74,19 +81,17 @@ export default function ParamInput({ paramField }: ParamInputProps) {
 
 interface EditFormMultiOptionProps {
   paramField: ParamField & { type: 'multi-option' };
+  options: string[];
 }
 
-function MultiOption({ paramField }: EditFormMultiOptionProps) {
+function MultiOption({ paramField, options }: EditFormMultiOptionProps) {
-  const [searchParams] = useSearchParams();
+  const { id, values } = paramField;
-  const { id, values, defaultValue = [''] } = paramField;
+  const [paramState, setParamState] = useState<string[]>(options);
-
-  const optionFromParams = searchParams.getAll(id);
-  const [paramState, setParamState] = useState<string[]>(optionFromParams.length ? optionFromParams : defaultValue);
 
+  // synchronise options
   useEffect(() => {
-    const params = searchParams.getAll(id);
+    setParamState(options);
-    setParamState(params.length ? params : defaultValue);
+  }, [options]);
-  }, [searchParams, id, defaultValue]);
 
   const toggleValue = (value: string, checked: boolean) => {
     if (checked) {