diff --git a/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx b/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx index 95866014a4..2032413eb7 100644 --- a/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx +++ b/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx @@ -12,12 +12,20 @@ import Tooltip from '../../../../elements/Tooltip'; import { useDocumentDrawer } from '../../../../elements/DocumentDrawer'; import { useConfig } from '../../../../utilities/Config'; import { Props as EditViewProps } from '../../../../views/collections/Edit/types'; +import { Value } from '../types'; import './index.scss'; const baseClass = 'relationship-add-new'; -export const AddNewRelation: React.FC = ({ path, hasMany, relationTo, value, setValue, dispatchOptions }) => { +export const AddNewRelation: React.FC = ({ + path, + hasMany, + relationTo, + value, + setValue, + dispatchOptions, +}) => { const relatedCollections = useRelatedCollections(relationTo); const { permissions } = useAuth(); const [show, setShow] = useState(false); @@ -37,30 +45,43 @@ export const AddNewRelation: React.FC = ({ path, hasMany, relationTo, val collectionSlug: collectionConfig?.slug, }); - const onSave: EditViewProps['onSave'] = useCallback((json) => { - const newValue = Array.isArray(relationTo) ? { - relationTo: collectionConfig.slug, - value: json.doc.id, - } : json.doc.id; + const onSave: EditViewProps['onSave'] = useCallback(({ + operation, + doc, + }) => { + if (operation === 'create') { + const newValue: Value = Array.isArray(relationTo) ? { + relationTo: collectionConfig.slug, + value: doc.id, + } : doc.id; - dispatchOptions({ - type: 'ADD', - collection: collectionConfig, - docs: [ - json.doc, - ], - sort: true, - i18n, - config, - }); + // ensure the value is not already in the array + const isNewValue = Array.isArray(relationTo) && Array.isArray(value) + ? !value.some((v) => v && typeof v === 'object' && v.value === doc.id) + : value !== doc.id; - if (hasMany) { - setValue([...(Array.isArray(value) ? value : []), newValue]); - } else { - setValue(newValue); + if (isNewValue) { + dispatchOptions({ + type: 'ADD', + collection: collectionConfig, + docs: [ + doc, + ], + sort: true, + i18n, + config, + }); + + + if (hasMany) { + setValue([...(Array.isArray(value) ? value : []), newValue]); + } else { + setValue(newValue); + } + } + + setSelectedCollection(undefined); } - - setSelectedCollection(undefined); }, [relationTo, collectionConfig, dispatchOptions, i18n, hasMany, setValue, value, config]); const onPopopToggle = useCallback((state) => { diff --git a/src/admin/components/forms/field-types/Relationship/AddNew/types.ts b/src/admin/components/forms/field-types/Relationship/AddNew/types.ts index 64cf5d8a0e..bffb2bc31b 100644 --- a/src/admin/components/forms/field-types/Relationship/AddNew/types.ts +++ b/src/admin/components/forms/field-types/Relationship/AddNew/types.ts @@ -1,11 +1,12 @@ import React from 'react'; -import { Action } from '../types'; +import { Action, OptionGroup, Value } from '../types'; export type Props = { hasMany: boolean relationTo: string | string[] path: string - value: unknown + value: Value | Value[] + options: OptionGroup[] setValue: (value: unknown) => void dispatchOptions: React.Dispatch } diff --git a/src/admin/components/forms/field-types/Relationship/index.tsx b/src/admin/components/forms/field-types/Relationship/index.tsx index 360bc9f51e..f1d1dfa735 100644 --- a/src/admin/components/forms/field-types/Relationship/index.tsx +++ b/src/admin/components/forms/field-types/Relationship/index.tsx @@ -450,7 +450,7 @@ const Relationship: React.FC = (props) => { /> {!readOnly && allowCreate && ( )}