diff --git a/src/components/Selector/index.tsx b/src/components/Selector/index.tsx index 2c459466f8..b83009d95b 100644 --- a/src/components/Selector/index.tsx +++ b/src/components/Selector/index.tsx @@ -294,13 +294,14 @@ export const KeywordSelector = ({ onChange, }: BaseSelectorMultiProps | BaseSelectorSingleProps) => { const intl = useIntl(); - const [defaultDataValue, setDefaultDataValue] = useState< - { label: string; value: number }[] | null + const [selectedValue, setSelectedValue] = useState< + MultiValue | SingleValue | null >(null); useEffect(() => { const loadDefaultKeywords = async (): Promise => { if (!defaultValue) { + setSelectedValue(null); return; } @@ -317,16 +318,16 @@ export const KeywordSelector = ({ (keyword): keyword is Keyword => keyword !== null ); - setDefaultDataValue( - validKeywords.map((keyword) => ({ - label: keyword.name, - value: keyword.id, - })) - ); + const nextValue = validKeywords.map((keyword) => ({ + label: keyword.name, + value: keyword.id, + })); + + setSelectedValue(isMulti ? nextValue : (nextValue[0] ?? null)); }; loadDefaultKeywords(); - }, [defaultValue]); + }, [defaultValue, isMulti]); const loadKeywordOptions = async (inputValue: string) => { const results = await axios.get( @@ -346,7 +347,6 @@ export const KeywordSelector = ({ return ( { + setSelectedValue(value); // eslint-disable-next-line @typescript-eslint/no-explicit-any onChange(value as any); }}