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 = (props) => { const update = useSingleUpdate(); - const defaultValue = useLatest(settingKey, isArray, override); + const value = useLatest(settingKey, isArray, override); return ( { 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 = ({ 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(null);