no log: Add value property to the chip component

2 files changed, 20 insertions, 3 deletions

diff --git a/frontend/src/Settings/components/forms.tsx b/frontend/src/Settings/components/forms.tsx
index 844fe26ab..6ffe92f30 100644
--- a/frontend/src/Settings/components/forms.tsx
+++ b/frontend/src/Settings/components/forms.tsx
@@ -176,11 +176,11 @@ export const Chips: FunctionComponent<ChipsProp> = (props) => {
 
   const update = useSingleUpdate();
 
-  const defaultValue = useLatest<string[]>(settingKey, isArray, override);
+  const value = useLatest<string[]>(settingKey, isArray, override);
 
   return (
     <CChips
-      defaultValue={defaultValue ?? undefined}
+      value={value ?? undefined}
       onChange={(v) => {
         update(v, settingKey);
       }}
diff --git a/frontend/src/components/inputs/Chips.tsx b/frontend/src/components/inputs/Chips.tsx
index ce136731a..af1ce9f4f 100644
--- a/frontend/src/components/inputs/Chips.tsx
+++ b/frontend/src/components/inputs/Chips.tsx
@@ -3,6 +3,7 @@ import React, {
   FunctionComponent,
   KeyboardEvent,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
   useState,
@@ -14,15 +15,31 @@ const SplitKeys = ["Tab", "Enter", " ", ",", ";"];
 export interface ChipsProps {
   disabled?: boolean;
   defaultValue?: readonly string[];
+  value?: readonly string[];
   onChange?: (v: string[]) => void;
 }
 
 export const Chips: FunctionComponent<ChipsProps> = ({
   defaultValue,
+  value,
   disabled,
   onChange,
 }) => {
-  const [chips, setChips] = useState(defaultValue ?? []);
+  const [chips, setChips] = useState(() => {
+    if (value) {
+      return value;
+    }
+    if (defaultValue) {
+      return defaultValue;
+    }
+    return [];
+  });
+
+  useEffect(() => {
+    if (value) {
+      setChips(value);
+    }
+  }, [value]);
 
   const input = useRef<HTMLInputElement>(null);