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) {