Fixed record pickers create new (#12705)

This PR fixes many bugs related to creating a record from inside a relation picker, single or multiple. QA video : Part 1 : https://github.com/user-attachments/assets/35450b08-ff84-4698-8318-681d72437cd4 Part 2 : https://github.com/user-attachments/assets/807c3a7b-4116-41ff-b9a0-23767452b631 Also : - Refactored `RecordDetailRelationSectionDropdown` to split it into two components to avoid too many ternaries inside functions. Fixes https://github.com/twentyhq/twenty/issues/12668 Fixes https://github.com/twentyhq/twenty/issues/12669 Fixes https://github.com/twentyhq/twenty/issues/12670 Fixes https://github.com/twentyhq/twenty/issues/12671
2025-06-19 15:37:21 +02:00
parent f9da3735de
commit bb3008e12b
9 changed files with 399 additions and 221 deletions
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationFromManyFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationFromManyFieldInput.tsx
@ -16,7 +16,12 @@ import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinit
 import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
 import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { MultipleRecordPicker } from '@/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker';
+import { useMultipleRecordPickerPerformSearch } from '@/object-record/record-picker/multiple-record-picker/hooks/useMultipleRecordPickerPerformSearch';
+import { multipleRecordPickerPickableMorphItemsComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerPickableMorphItemsComponentState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useRecoilCallback } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';

 type RelationFromManyFieldInputProps = {
  onSubmit?: FieldInputEvent;
@ -86,6 +91,55 @@ export const RelationFromManyFieldInput = ({
    recordFieldInputLayoutDirectionComponentState,
  );

+  const multipleRecordPickerPickableMorphItemsCallbackState =
+    useRecoilComponentCallbackStateV2(
+      multipleRecordPickerPickableMorphItemsComponentState,
+      recordPickerInstanceId,
+    );
+  const { performSearch: multipleRecordPickerPerformSearch } =
+    useMultipleRecordPickerPerformSearch();
+
+  const handleCreateNew = useRecoilCallback(
+    ({ snapshot, set }) =>
+      async (searchInput?: string) => {
+        const newRecordId =
+          await createNewRecordAndOpenRightDrawer?.(searchInput);
+
+        if (!isDefined(newRecordId)) {
+          return;
+        }
+
+        const multipleRecordPickerPickableMorphItems = snapshot
+          .getLoadable(multipleRecordPickerPickableMorphItemsCallbackState)
+          .getValue();
+
+        const newMorphItems = multipleRecordPickerPickableMorphItems.concat({
+          recordId: newRecordId,
+          objectMetadataId: relationObjectMetadataItem.id,
+          isSelected: true,
+          isMatchingSearchFilter: true,
+        });
+
+        set(multipleRecordPickerPickableMorphItemsCallbackState, newMorphItems);
+
+        multipleRecordPickerPerformSearch({
+          multipleRecordPickerInstanceId: recordPickerInstanceId,
+          forceSearchFilter: searchInput,
+          forceSearchableObjectMetadataItems: [relationObjectMetadataItem],
+          forcePickableMorphItems: newMorphItems,
+        });
+      },
+    [
+      createNewRecordAndOpenRightDrawer,
+      relationObjectMetadataItem,
+      recordPickerInstanceId,
+      multipleRecordPickerPickableMorphItemsCallbackState,
+      multipleRecordPickerPerformSearch,
+    ],
+  );
+
+  const canCreateNew = !isRelationFromActivityTargets;
+
  return (
    <MultipleRecordPicker
      focusId={recordPickerInstanceId}
@ -102,11 +156,7 @@ export const RelationFromManyFieldInput = ({
          updateRelation(morphItem);
        }
      }}
-      onCreate={
-        !isRelationFromActivityTargets
-          ? createNewRecordAndOpenRightDrawer
-          : undefined
-      }
+      onCreate={canCreateNew ? handleCreateNew : undefined}
      onClickOutside={handleSubmit}
      layoutDirection={
        layoutDirection === 'downward'
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationToOneFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationToOneFieldInput.tsx
@ -8,9 +8,12 @@ import { recordFieldInputLayoutDirectionComponentState } from '@/object-record/r
 import { recordFieldInputLayoutDirectionLoadingComponentState } from '@/object-record/record-field/states/recordFieldInputLayoutDirectionLoadingComponentState';
 import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
 import { SingleRecordPicker } from '@/object-record/record-picker/single-record-picker/components/SingleRecordPicker';
+import { singleRecordPickerSelectedIdComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerSelectedIdComponentState';
 import { SingleRecordPickerRecord } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerRecord';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { isDefined } from 'twenty-shared/utils';
 import { IconForbid } from 'twenty-ui/display';

 export type RelationToOneFieldInputProps = {
@ -62,6 +65,19 @@ export const RelationToOneFieldInput = ({
    recordFieldInputLayoutDirectionLoadingComponentState,
  );

+  const setSingleRecordPickerSelectedId = useSetRecoilComponentStateV2(
+    singleRecordPickerSelectedIdComponentState,
+    recordPickerInstanceId,
+  );
+
+  const handleCreateNew = async (searchInput?: string) => {
+    const newRecordId = await createNewRecordAndOpenRightDrawer?.(searchInput);
+
+    if (isDefined(newRecordId)) {
+      setSingleRecordPickerSelectedId(newRecordId);
+    }
+  };
+
  if (isLoading) {
    return <></>;
  }
@ -73,7 +89,7 @@ export const RelationToOneFieldInput = ({
      EmptyIcon={IconForbid}
      emptyLabel={'No ' + fieldDefinition.label}
      onCancel={onCancel}
-      onCreate={createNewRecordAndOpenRightDrawer}
+      onCreate={handleCreateNew}
      onRecordSelected={handleRecordSelected}
      objectNameSingular={
        fieldDefinition.metadata.relationObjectMetadataNameSingular
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useAddNewRecordAndOpenRightDrawer.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useAddNewRecordAndOpenRightDrawer.ts
@ -1,6 +1,7 @@
 import { useSetRecoilState } from 'recoil';
 import { v4 } from 'uuid';

+import { SEARCH_QUERY } from '@/command-menu/graphql/queries/search';
 import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
@ -9,6 +10,8 @@ import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
+import { useApolloClient } from '@apollo/client';
+import { getOperationName } from '@apollo/client/utilities';
 import { isDefined } from 'twenty-shared/utils';
 import { FieldMetadataType, RelationType } from '~/generated-metadata/graphql';

@ -18,6 +21,7 @@ type RecordDetailRelationSectionProps = {
  relationFieldMetadataItem?: FieldMetadataItem;
  recordId: string;
 };
+
 export const useAddNewRecordAndOpenRightDrawer = ({
  relationObjectMetadataNameSingular,
  relationObjectMetadataItem,
@ -41,6 +45,8 @@ export const useAddNewRecordAndOpenRightDrawer = ({

  const { openRecordInCommandMenu } = useOpenRecordInCommandMenu();

+  const apolloClient = useApolloClient();
+
  if (
    relationObjectMetadataNameSingular === 'workspaceMember' ||
    !isDefined(
@ -103,10 +109,16 @@ export const useAddNewRecordAndOpenRightDrawer = ({
      setViewableRecordId(newRecordId);
      setViewableRecordNameSingular(relationObjectMetadataNameSingular);

+      apolloClient.refetchQueries({
+        include: [getOperationName(SEARCH_QUERY) ?? ''],
+      });
+
      openRecordInCommandMenu({
        recordId: newRecordId,
        objectNameSingular: relationObjectMetadataNameSingular,
      });
+
+      return newRecordId;
    },
  };
 };
--- a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPicker.tsx
@ -6,6 +6,7 @@ import {
 } from '@/object-record/record-picker/single-record-picker/components/SingleRecordPickerMenuItemsWithSearch';
 import { SingleRecordPickerComponentInstanceContext } from '@/object-record/record-picker/single-record-picker/states/contexts/SingleRecordPickerComponentInstanceContext';
 import { singleRecordPickerSearchFilterComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerSearchFilterComponentState';
+import { SingleRecordPickerRecord } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerRecord';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
@ -43,10 +44,12 @@ export const SingleRecordPicker = ({
    onCancel?.();
  };

-  const handleCreateNew = (searchInput?: string | undefined) => {
-    onCreate?.(searchInput);
-
+  const handleRecordSelected = (
+    selectedRecord?: SingleRecordPickerRecord | undefined,
+  ) => {
    setRecordPickerSearchFilter('');
+
+    onRecordSelected?.(selectedRecord);
  };

  useListenClickOutside({
@ -78,8 +81,8 @@ export const SingleRecordPicker = ({
            emptyLabel,
            excludedRecordIds,
            onCancel: handleCancel,
-            onCreate: handleCreateNew,
-            onRecordSelected,
+            onCreate,
+            onRecordSelected: handleRecordSelected,
            objectNameSingular,
            layoutDirection,
          }}
--- a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPickerMenuItemsWithSearch.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/components/SingleRecordPickerMenuItemsWithSearch.tsx
@ -76,6 +76,7 @@ export const SingleRecordPickerMenuItemsWithSearch = ({
  const searchHasNoResults =
    isNonEmptyString(recordPickerSearchFilter) &&
    records.recordsToSelect.length === 0 &&
+    records.filteredSelectedRecords.length === 0 &&
    !records.loading;

  const handleCreateNew = () => {
--- a/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/hooks/useSingleRecordPickerSearch.ts
+++ b/packages/twenty-front/src/modules/object-record/record-picker/single-record-picker/hooks/useSingleRecordPickerSearch.ts
@ -40,7 +40,6 @@ export const useSingleRecordPickerSearch = (
    event: React.ChangeEvent<HTMLInputElement>,
  ) => {
    debouncedSetSearchFilter(event.currentTarget.value);
-    setRecordPickerSelectedId(undefined);
  };

  return {
--- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdown.tsx
@ -1,34 +1,12 @@
-import { useCallback, useContext } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useContext } from 'react';

 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
-import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly';
 import { useIsRecordReadOnly } from '@/object-record/record-field/hooks/useIsRecordReadOnly';
-import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
-import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/record-field/meta-types/input/hooks/useAddNewRecordAndOpenRightDrawer';
-import { useUpdateRelationFromManyFieldInput } from '@/object-record/record-field/meta-types/input/hooks/useUpdateRelationFromManyFieldInput';
 import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { MultipleRecordPicker } from '@/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker';
-import { useMultipleRecordPickerPerformSearch } from '@/object-record/record-picker/multiple-record-picker/hooks/useMultipleRecordPickerPerformSearch';
-import { multipleRecordPickerPickableMorphItemsComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerPickableMorphItemsComponentState';
-import { multipleRecordPickerSearchFilterComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerSearchFilterComponentState';
-import { multipleRecordPickerSearchableObjectMetadataItemsComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerSearchableObjectMetadataItemsComponentState';
-import { SingleRecordPicker } from '@/object-record/record-picker/single-record-picker/components/SingleRecordPicker';
-import { singleRecordPickerSearchFilterComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerSearchFilterComponentState';
-import { singleRecordPickerSelectedIdComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerSelectedIdComponentState';
-import { SingleRecordPickerRecord } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerRecord';
-import { getRecordFieldCardRelationPickerDropdownId } from '@/object-record/record-show/utils/getRecordFieldCardRelationPickerDropdownId';
-import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
-import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
-import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
-import { IconForbid, IconPencil, IconPlus } from 'twenty-ui/display';
-import { LightIconButton } from 'twenty-ui/input';
+import { RecordDetailRelationSectionDropdownToMany } from '@/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdownToMany';
+import { RecordDetailRelationSectionDropdownToOne } from '@/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdownToOne';
 import { RelationType } from '~/generated-metadata/graphql';

 type RecordDetailRelationSectionDropdownProps = {
@ -38,17 +16,13 @@ type RecordDetailRelationSectionDropdownProps = {
 export const RecordDetailRelationSectionDropdown = ({
  loading,
 }: RecordDetailRelationSectionDropdownProps) => {
-  const { recordId, fieldDefinition } = useContext(FieldContext);
+  const { fieldDefinition, recordId } = useContext(FieldContext);
  const {
-    fieldName,
-    relationFieldMetadataId,
-    relationObjectMetadataNameSingular,
    relationType,
    objectMetadataNameSingular,
+    relationObjectMetadataNameSingular,
  } = fieldDefinition.metadata as FieldRelationMetadata;

-  const record = useRecoilValue(recordStoreFamilyState(recordId));
-
  const { objectMetadataItem: recordObjectMetadataItem } =
    useObjectMetadataItem({
      objectNameSingular: objectMetadataNameSingular ?? '',
@ -59,99 +33,10 @@ export const RecordDetailRelationSectionDropdown = ({
      objectNameSingular: relationObjectMetadataNameSingular,
    });

-  const relationFieldMetadataItem = relationObjectMetadataItem.fields.find(
-    ({ id }) => id === relationFieldMetadataId,
-  );
-
-  const fieldValue = useRecoilValue<
-    ({ id: string } & Record<string, any>) | ObjectRecord[] | null
-  >(recordStoreFamilySelector({ recordId, fieldName }));
-
  // TODO: use new relation type
  const isToOneObject = relationType === RelationType.MANY_TO_ONE;
  const isToManyObjects = relationType === RelationType.ONE_TO_MANY;

-  const relationRecords: ObjectRecord[] =
-    fieldValue && isToOneObject
-      ? [fieldValue as ObjectRecord]
-      : ((fieldValue as ObjectRecord[]) ?? []);
-
-  const dropdownId = getRecordFieldCardRelationPickerDropdownId({
-    fieldDefinition,
-    recordId,
-  });
-
-  const { closeDropdown, dropdownPlacement } = useDropdown(dropdownId);
-
-  const setMultipleRecordPickerSearchFilter = useSetRecoilComponentStateV2(
-    multipleRecordPickerSearchFilterComponentState,
-    dropdownId,
-  );
-
-  const setMultipleRecordPickerPickableMorphItems =
-    useSetRecoilComponentStateV2(
-      multipleRecordPickerPickableMorphItemsComponentState,
-      dropdownId,
-    );
-
-  const setMultipleRecordPickerSearchableObjectMetadataItems =
-    useSetRecoilComponentStateV2(
-      multipleRecordPickerSearchableObjectMetadataItemsComponentState,
-      dropdownId,
-    );
-
-  const { performSearch: multipleRecordPickerPerformSearch } =
-    useMultipleRecordPickerPerformSearch();
-
-  const setSingleRecordPickerSearchFilter = useSetRecoilComponentStateV2(
-    singleRecordPickerSearchFilterComponentState,
-    dropdownId,
-  );
-
-  const setSingleRecordPickerSelectedId = useSetRecoilComponentStateV2(
-    singleRecordPickerSelectedIdComponentState,
-    dropdownId,
-  );
-
-  const handleCloseRelationPickerDropdown = useCallback(() => {
-    setMultipleRecordPickerSearchFilter('');
-  }, [setMultipleRecordPickerSearchFilter]);
-
-  const persistField = usePersistField();
-  const { updateOneRecord: updateOneRelationRecord } = useUpdateOneRecord({
-    objectNameSingular: relationObjectMetadataNameSingular,
-  });
-
-  const handleRelationPickerEntitySelected = (
-    selectedRelationEntity?: SingleRecordPickerRecord,
-  ) => {
-    closeDropdown();
-
-    if (!selectedRelationEntity?.id || !relationFieldMetadataItem?.name) return;
-
-    if (isToOneObject) {
-      persistField(selectedRelationEntity.record);
-      return;
-    }
-
-    updateOneRelationRecord({
-      idToUpdate: selectedRelationEntity.id,
-      updateOneRecordInput: {
-        [relationFieldMetadataItem.name]: record,
-      },
-    });
-  };
-
-  const { updateRelation } = useUpdateRelationFromManyFieldInput();
-
-  const { createNewRecordAndOpenRightDrawer } =
-    useAddNewRecordAndOpenRightDrawer({
-      relationObjectMetadataNameSingular,
-      relationObjectMetadataItem,
-      relationFieldMetadataItem,
-      recordId,
-    });
-
  const isRecordReadOnly = useIsRecordReadOnly({
    recordId,
    objectMetadataId: isToOneObject
@ -166,93 +51,11 @@ export const RecordDetailRelationSectionDropdown = ({

  if (loading || isFieldReadOnly) return null;

-  const handleOpenRelationPickerDropdown = () => {
-    if (isToOneObject) {
-      setSingleRecordPickerSearchFilter('');
-      if (relationRecords.length > 0) {
-        setSingleRecordPickerSelectedId(relationRecords[0].id);
-      }
-    }
-
-    if (isToManyObjects) {
-      setMultipleRecordPickerSearchableObjectMetadataItems([
-        relationObjectMetadataItem,
-      ]);
-      setMultipleRecordPickerSearchFilter('');
-      setMultipleRecordPickerPickableMorphItems(
-        relationRecords.map((record) => ({
-          recordId: record.id,
-          objectMetadataId: relationObjectMetadataItem.id,
-          isSelected: true,
-          isMatchingSearchFilter: true,
-        })),
-      );
-
-      multipleRecordPickerPerformSearch({
-        multipleRecordPickerInstanceId: dropdownId,
-        forceSearchFilter: '',
-        forceSearchableObjectMetadataItems: [relationObjectMetadataItem],
-        forcePickableMorphItems: relationRecords.map((record) => ({
-          recordId: record.id,
-          objectMetadataId: relationObjectMetadataItem.id,
-          isSelected: true,
-          isMatchingSearchFilter: true,
-        })),
-      });
-    }
-  };
-
-  return (
-    <DropdownScope dropdownScopeId={dropdownId}>
-      <Dropdown
-        dropdownId={dropdownId}
-        dropdownPlacement="left-start"
-        onClose={handleCloseRelationPickerDropdown}
-        onOpen={handleOpenRelationPickerDropdown}
-        clickableComponent={
-          <LightIconButton
-            className="displayOnHover"
-            Icon={isToOneObject ? IconPencil : IconPlus}
-            accent="tertiary"
-          />
-        }
-        dropdownComponents={
-          isToOneObject ? (
-            <SingleRecordPicker
-              focusId={dropdownId}
-              componentInstanceId={dropdownId}
-              EmptyIcon={IconForbid}
-              onRecordSelected={handleRelationPickerEntitySelected}
-              objectNameSingular={relationObjectMetadataNameSingular}
-              recordPickerInstanceId={dropdownId}
-              onCreate={createNewRecordAndOpenRightDrawer}
-              onCancel={closeDropdown}
-              layoutDirection={
-                dropdownPlacement?.includes('end')
-                  ? 'search-bar-on-bottom'
-                  : 'search-bar-on-top'
-              }
-            />
-          ) : (
-            <MultipleRecordPicker
-              focusId={dropdownId}
-              componentInstanceId={dropdownId}
-              onCreate={() => {
-                closeDropdown();
-                createNewRecordAndOpenRightDrawer?.();
-              }}
-              onChange={updateRelation}
-              onSubmit={closeDropdown}
-              onClickOutside={closeDropdown}
-              layoutDirection={
-                dropdownPlacement?.includes('end')
-                  ? 'search-bar-on-bottom'
-                  : 'search-bar-on-top'
-              }
-            />
-          )
-        }
-      />
-    </DropdownScope>
-  );
+  if (isToOneObject) {
+    return <RecordDetailRelationSectionDropdownToOne />;
+  } else if (isToManyObjects) {
+    return <RecordDetailRelationSectionDropdownToMany />;
+  } else {
+    return null;
+  }
 };
--- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdownToMany.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdownToMany.tsx
@ -0,0 +1,153 @@
+import { useCallback, useContext } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
+import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/record-field/meta-types/input/hooks/useAddNewRecordAndOpenRightDrawer';
+import { useUpdateRelationFromManyFieldInput } from '@/object-record/record-field/meta-types/input/hooks/useUpdateRelationFromManyFieldInput';
+import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata';
+import { MultipleRecordPicker } from '@/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker';
+import { useMultipleRecordPickerPerformSearch } from '@/object-record/record-picker/multiple-record-picker/hooks/useMultipleRecordPickerPerformSearch';
+import { multipleRecordPickerPickableMorphItemsComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerPickableMorphItemsComponentState';
+import { multipleRecordPickerSearchFilterComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerSearchFilterComponentState';
+import { multipleRecordPickerSearchableObjectMetadataItemsComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerSearchableObjectMetadataItemsComponentState';
+import { getRecordFieldCardRelationPickerDropdownId } from '@/object-record/record-show/utils/getRecordFieldCardRelationPickerDropdownId';
+import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { IconPlus } from 'twenty-ui/display';
+import { LightIconButton } from 'twenty-ui/input';
+
+export const RecordDetailRelationSectionDropdownToMany = () => {
+  const { recordId, fieldDefinition } = useContext(FieldContext);
+  const {
+    fieldName,
+    relationFieldMetadataId,
+    relationObjectMetadataNameSingular,
+  } = fieldDefinition.metadata as FieldRelationMetadata;
+
+  const { objectMetadataItem: relationObjectMetadataItem } =
+    useObjectMetadataItem({
+      objectNameSingular: relationObjectMetadataNameSingular,
+    });
+
+  const relationFieldMetadataItem = relationObjectMetadataItem.fields.find(
+    ({ id }) => id === relationFieldMetadataId,
+  );
+
+  const fieldValue = useRecoilValue<
+    ({ id: string } & Record<string, any>) | ObjectRecord[] | null
+  >(recordStoreFamilySelector({ recordId, fieldName }));
+
+  const relationRecords: ObjectRecord[] = (fieldValue as ObjectRecord[]) ?? [];
+
+  const dropdownId = getRecordFieldCardRelationPickerDropdownId({
+    fieldDefinition,
+    recordId,
+  });
+
+  const { closeDropdown, dropdownPlacement } = useDropdown(dropdownId);
+
+  const setMultipleRecordPickerSearchFilter = useSetRecoilComponentStateV2(
+    multipleRecordPickerSearchFilterComponentState,
+    dropdownId,
+  );
+
+  const setMultipleRecordPickerPickableMorphItems =
+    useSetRecoilComponentStateV2(
+      multipleRecordPickerPickableMorphItemsComponentState,
+      dropdownId,
+    );
+
+  const setMultipleRecordPickerSearchableObjectMetadataItems =
+    useSetRecoilComponentStateV2(
+      multipleRecordPickerSearchableObjectMetadataItemsComponentState,
+      dropdownId,
+    );
+
+  const { performSearch: multipleRecordPickerPerformSearch } =
+    useMultipleRecordPickerPerformSearch();
+
+  const handleCloseRelationPickerDropdown = useCallback(() => {
+    setMultipleRecordPickerSearchFilter('');
+  }, [setMultipleRecordPickerSearchFilter]);
+
+  const { updateRelation } = useUpdateRelationFromManyFieldInput();
+
+  const { createNewRecordAndOpenRightDrawer } =
+    useAddNewRecordAndOpenRightDrawer({
+      relationObjectMetadataNameSingular,
+      relationObjectMetadataItem,
+      relationFieldMetadataItem,
+      recordId,
+    });
+
+  const handleOpenRelationPickerDropdown = () => {
+    setMultipleRecordPickerSearchableObjectMetadataItems([
+      relationObjectMetadataItem,
+    ]);
+    setMultipleRecordPickerSearchFilter('');
+    setMultipleRecordPickerPickableMorphItems(
+      relationRecords.map((record) => ({
+        recordId: record.id,
+        objectMetadataId: relationObjectMetadataItem.id,
+        isSelected: true,
+        isMatchingSearchFilter: true,
+      })),
+    );
+
+    multipleRecordPickerPerformSearch({
+      multipleRecordPickerInstanceId: dropdownId,
+      forceSearchFilter: '',
+      forceSearchableObjectMetadataItems: [relationObjectMetadataItem],
+      forcePickableMorphItems: relationRecords.map((record) => ({
+        recordId: record.id,
+        objectMetadataId: relationObjectMetadataItem.id,
+        isSelected: true,
+        isMatchingSearchFilter: true,
+      })),
+    });
+  };
+
+  const handleCreateNew = (searchString?: string) => {
+    closeDropdown();
+
+    createNewRecordAndOpenRightDrawer?.(searchString);
+  };
+
+  return (
+    <DropdownScope dropdownScopeId={dropdownId}>
+      <Dropdown
+        dropdownId={dropdownId}
+        dropdownPlacement="left-start"
+        onClose={handleCloseRelationPickerDropdown}
+        onOpen={handleOpenRelationPickerDropdown}
+        clickableComponent={
+          <LightIconButton
+            className="displayOnHover"
+            Icon={IconPlus}
+            accent="tertiary"
+          />
+        }
+        dropdownComponents={
+          <MultipleRecordPicker
+            focusId={dropdownId}
+            componentInstanceId={dropdownId}
+            onCreate={handleCreateNew}
+            onChange={updateRelation}
+            onSubmit={closeDropdown}
+            onClickOutside={closeDropdown}
+            layoutDirection={
+              dropdownPlacement?.includes('end')
+                ? 'search-bar-on-bottom'
+                : 'search-bar-on-top'
+            }
+          />
+        }
+      />
+    </DropdownScope>
+  );
+};
--- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdownToOne.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdownToOne.tsx
@ -0,0 +1,141 @@
+import { useCallback, useContext } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
+import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
+import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/record-field/meta-types/input/hooks/useAddNewRecordAndOpenRightDrawer';
+import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata';
+import { SingleRecordPicker } from '@/object-record/record-picker/single-record-picker/components/SingleRecordPicker';
+import { singleRecordPickerSearchFilterComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerSearchFilterComponentState';
+import { singleRecordPickerSelectedIdComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerSelectedIdComponentState';
+import { SingleRecordPickerRecord } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerRecord';
+import { getRecordFieldCardRelationPickerDropdownId } from '@/object-record/record-show/utils/getRecordFieldCardRelationPickerDropdownId';
+import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { IconForbid, IconPencil } from 'twenty-ui/display';
+import { LightIconButton } from 'twenty-ui/input';
+
+export const RecordDetailRelationSectionDropdownToOne = () => {
+  const { recordId, fieldDefinition } = useContext(FieldContext);
+  const {
+    fieldName,
+    relationFieldMetadataId,
+    relationObjectMetadataNameSingular,
+  } = fieldDefinition.metadata as FieldRelationMetadata;
+
+  const { objectMetadataItem: relationObjectMetadataItem } =
+    useObjectMetadataItem({
+      objectNameSingular: relationObjectMetadataNameSingular,
+    });
+
+  const relationFieldMetadataItem = relationObjectMetadataItem.fields.find(
+    ({ id }) => id === relationFieldMetadataId,
+  );
+
+  const fieldValue = useRecoilValue<
+    ({ id: string } & Record<string, any>) | ObjectRecord[] | null
+  >(recordStoreFamilySelector({ recordId, fieldName }));
+
+  const relationRecords: ObjectRecord[] = fieldValue
+    ? [fieldValue as ObjectRecord]
+    : [];
+
+  const dropdownId = getRecordFieldCardRelationPickerDropdownId({
+    fieldDefinition,
+    recordId,
+  });
+
+  const { closeDropdown, dropdownPlacement } = useDropdown(dropdownId);
+
+  const setSingleRecordPickerSearchFilter = useSetRecoilComponentStateV2(
+    singleRecordPickerSearchFilterComponentState,
+    dropdownId,
+  );
+
+  const setSingleRecordPickerSelectedId = useSetRecoilComponentStateV2(
+    singleRecordPickerSelectedIdComponentState,
+    dropdownId,
+  );
+
+  const handleCloseRelationPickerDropdown = useCallback(() => {
+    setSingleRecordPickerSearchFilter('');
+  }, [setSingleRecordPickerSearchFilter]);
+
+  const persistField = usePersistField();
+
+  const handleRelationPickerEntitySelected = (
+    selectedRelationEntity?: SingleRecordPickerRecord,
+  ) => {
+    closeDropdown();
+
+    if (!selectedRelationEntity?.id || !relationFieldMetadataItem?.name) return;
+
+    persistField(selectedRelationEntity.record);
+  };
+
+  const { createNewRecordAndOpenRightDrawer } =
+    useAddNewRecordAndOpenRightDrawer({
+      relationObjectMetadataNameSingular,
+      relationObjectMetadataItem,
+      relationFieldMetadataItem,
+      recordId,
+    });
+
+  const handleOpenRelationPickerDropdown = () => {
+    setSingleRecordPickerSearchFilter('');
+    if (relationRecords.length > 0) {
+      setSingleRecordPickerSelectedId(relationRecords[0]?.id);
+    }
+  };
+
+  const handleCreateNew = (searchString?: string) => {
+    closeDropdown();
+
+    createNewRecordAndOpenRightDrawer?.(searchString);
+  };
+
+  const shouldAllowCreateNew =
+    relationObjectMetadataNameSingular !==
+    CoreObjectNameSingular.WorkspaceMember;
+
+  return (
+    <DropdownScope dropdownScopeId={dropdownId}>
+      <Dropdown
+        dropdownId={dropdownId}
+        dropdownPlacement="left-start"
+        onClose={handleCloseRelationPickerDropdown}
+        onOpen={handleOpenRelationPickerDropdown}
+        clickableComponent={
+          <LightIconButton
+            className="displayOnHover"
+            Icon={IconPencil}
+            accent="tertiary"
+          />
+        }
+        dropdownComponents={
+          <SingleRecordPicker
+            focusId={dropdownId}
+            componentInstanceId={dropdownId}
+            EmptyIcon={IconForbid}
+            onRecordSelected={handleRelationPickerEntitySelected}
+            objectNameSingular={relationObjectMetadataNameSingular}
+            recordPickerInstanceId={dropdownId}
+            onCancel={closeDropdown}
+            onCreate={shouldAllowCreateNew ? handleCreateNew : undefined}
+            layoutDirection={
+              dropdownPlacement?.includes('end')
+                ? 'search-bar-on-bottom'
+                : 'search-bar-on-top'
+            }
+          />
+        }
+      />
+    </DropdownScope>
+  );
+};