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 ;
+ const optionFromParams = searchParams.getAll(id);
+
+ return (
+
+ );
}
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(optionFromParams.length ? optionFromParams : defaultValue);
+function MultiOption({ paramField, options }: EditFormMultiOptionProps) {
+ const { id, values } = paramField;
+ const [paramState, setParamState] = useState(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) {