diff --git a/src/frontend/src/components/forms/fields/RelatedModelField.tsx b/src/frontend/src/components/forms/fields/RelatedModelField.tsx index a16bf32b8e..3f0cc4c483 100644 --- a/src/frontend/src/components/forms/fields/RelatedModelField.tsx +++ b/src/frontend/src/components/forms/fields/RelatedModelField.tsx @@ -43,6 +43,7 @@ export function RelatedModelField({ const [offset, setOffset] = useState(0); + const [initialData, setInitialData] = useState<{}>({}); const [data, setData] = useState([]); const dataRef = useRef([]); @@ -61,17 +62,15 @@ export function RelatedModelField({ const url = `${definition.api_url}${field.value}/`; api.get(url).then((response) => { - const data = response.data; - - if (data && data.pk) { + if (response.data && response.data.pk) { const value = { - value: data.pk, - data: data + value: response.data.pk, + data: response.data }; - setData([value]); + setInitialData(value); dataRef.current = [value]; - setPk(data.pk); + setPk(response.data.pk); } }); } else { @@ -208,10 +207,14 @@ export function RelatedModelField({ }; }, [definition]); - const currentValue = useMemo( - () => pk !== null && data.find((item) => item.value === pk), - [pk, data] - ); + const currentValue = useMemo(() => { + if (!pk) { + return null; + } + + let _data = [...data, initialData]; + return _data.find((item) => item.value === pk); + }, [pk, data]); // Field doesn't follow Mantine theming // Define color theme to pass to field based on Mantine theme @@ -278,7 +281,6 @@ export function RelatedModelField({ onMenuScrollToBottom={() => setOffset(offset + limit)} onMenuOpen={() => { setIsOpen(true); - setValue(''); resetSearch(); selectQuery.refetch(); }}