From bffa863fb49cc92ab5c83b59b75585382f68d8b7 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Fri, 5 Sep 2025 06:20:40 +0200
Subject: [PATCH] fix: multi select infinite loop

---
 .../view-params-editor/ParamInput.tsx         | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/apps/client/src/common/components/view-params-editor/ParamInput.tsx b/apps/client/src/common/components/view-params-editor/ParamInput.tsx
index f335d9a2e..9754efb99 100644
--- a/apps/client/src/common/components/view-params-editor/ParamInput.tsx
+++ b/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) {
-  const [searchParams] = useSearchParams();
-  const { id, values, defaultValue = [''] } = paramField;
-
-  const optionFromParams = searchParams.getAll(id);
-  const [paramState, setParamState] = useState<string[]>(optionFromParams.length ? optionFromParams : defaultValue);
+function MultiOption({ paramField, options }: EditFormMultiOptionProps) {
+  const { id, values } = paramField;
+  const [paramState, setParamState] = useState<string[]>(options);
 
+  // synchronise options
   useEffect(() => {
-    const params = searchParams.getAll(id);
-    setParamState(params.length ? params : defaultValue);
-  }, [searchParams, id, defaultValue]);
+    setParamState(options);
+  }, [options]);
 
   const toggleValue = (value: string, checked: boolean) => {
     if (checked) {