diff --git a/apps/client/src/common/components/view-params-editor/InlineColourPicker.tsx b/apps/client/src/common/components/view-params-editor/InlineColourPicker.tsx
index 705d591296..208dc543d4 100644
--- a/apps/client/src/common/components/view-params-editor/InlineColourPicker.tsx
+++ b/apps/client/src/common/components/view-params-editor/InlineColourPicker.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
import SwatchPicker from '../input/colour-input/SwatchPicker';
@@ -16,10 +16,13 @@ const ensureHex = (value: string) => {
return value;
};
-export default function InlineColourPicker(props: InlineColourPickerProps) {
- const { name, value } = props;
+export default function InlineColourPicker({ name, value }: InlineColourPickerProps) {
const [colour, setColour] = useState(() => ensureHex(value));
+ useEffect(() => {
+ setColour(ensureHex(value));
+ }, [value]);
+
return (
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 8d673665a6..f335d9a2ef 100644
--- a/apps/client/src/common/components/view-params-editor/ParamInput.tsx
+++ b/apps/client/src/common/components/view-params-editor/ParamInput.tsx
@@ -1,10 +1,10 @@
-import { useState } from 'react';
+import { ComponentProps, useEffect, useState } from 'react';
import { useSearchParams } from 'react-router';
import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
import Checkbox from '../checkbox/Checkbox';
import Input from '../input/input/Input';
-import Select from '../select/Select';
+import Select, { SelectOption } from '../select/Select';
import Switch from '../switch/Switch';
import InlineColourPicker from './InlineColourPicker';
@@ -35,7 +35,7 @@ export default function ParamInput({ paramField }: ParamInputProps) {
return
No options available;
}
- return
;
+ return
;
}
if (type === 'multi-option') {
@@ -43,7 +43,7 @@ export default function ParamInput({ paramField }: ParamInputProps) {
}
if (type === 'boolean') {
- return
;
+ return
;
}
if (type === 'number') {
@@ -63,15 +63,13 @@ export default function ParamInput({ paramField }: ParamInputProps) {
}
if (type === 'colour') {
- const currentvalue = `#${searchParams.get(id) ?? defaultValue}`;
-
- return
;
+ return
;
}
- const defaultStringValue = searchParams.get(id) ?? defaultValue;
+ const defaultStringValue = searchParams.get(id) ?? defaultValue ?? '';
const { placeholder } = paramField;
- return
;
+ return
;
}
interface EditFormMultiOptionProps {
@@ -83,7 +81,12 @@ function MultiOption({ paramField }: EditFormMultiOptionProps) {
const { id, values, defaultValue = [''] } = paramField;
const optionFromParams = searchParams.getAll(id);
- const [paramState, setParamState] = useState
(optionFromParams || defaultValue);
+ const [paramState, setParamState] = useState(optionFromParams.length ? optionFromParams : defaultValue);
+
+ useEffect(() => {
+ const params = searchParams.getAll(id);
+ setParamState(params.length ? params : defaultValue);
+ }, [searchParams, id, defaultValue]);
const toggleValue = (value: string, checked: boolean) => {
if (checked) {
@@ -129,5 +132,52 @@ interface ControlledSwitchProps {
}
function ControlledSwitch({ id, initialValue }: ControlledSwitchProps) {
const [checked, setChecked] = useState(initialValue);
+
+ // synchronise checked state
+ useEffect(() => {
+ setChecked(initialValue);
+ }, [initialValue]);
+
return ;
}
+
+interface ControlledSelectProps {
+ id: string;
+ initialValue?: string;
+ options: SelectOption[];
+}
+function ControlledSelect({ id, initialValue, options }: ControlledSelectProps) {
+ const [selected, setSelected] = useState(initialValue);
+
+ // synchronise selected state
+ useEffect(() => {
+ setSelected(initialValue);
+ }, [initialValue]);
+
+ return (
+