RecordPicker refactoring part 3: remove effects (#10505)

This PR is part 3 of RecordPicker refactoring. 

It aims to remove all effects from:
- (low level layer) SingleRecordPicker, MultipleRecordPicker
- (higher level layer) RelationPicker, RelationToOneInput,
RelationFromManyInput, ActivityTargetInput...

In this PR, I'm re-grouping Effects in ActivityTarget section and
creating a hook that will be called on inlineCellOpen

packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx

@@ -3,7 +3,10 @@ import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil';
 import { v4 } from 'uuid';
 
 import { useUpsertActivity } from '@/activities/hooks/useUpsertActivity';
+import { ActivityTargetInlineCellEditModeMultiRecordsEffect } from '@/activities/inline-cell/components/ActivityTargetInlineCellEditModeMultiRecordsEffect';
+import { ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect } from '@/activities/inline-cell/components/ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect';
 import { ActivityTargetObjectRecordEffect } from '@/activities/inline-cell/components/ActivityTargetObjectRecordEffect';
+import { MultipleObjectRecordOnClickOutsideEffect } from '@/activities/inline-cell/components/MultipleObjectRecordOnClickOutsideEffect';
 import { isActivityInCreateModeState } from '@/activities/states/isActivityInCreateModeState';
 import { ActivityTargetWithTargetRecord } from '@/activities/types/ActivityTargetObject';
 import { Note } from '@/activities/types/Note';
@@ -24,12 +27,10 @@ import {
   objectRecordMultiSelectComponentFamilyState,
 } from '@/object-record/record-field/states/objectRecordMultiSelectComponentFamilyState';
 import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
-import { ActivityTargetInlineCellEditModeMultiRecordsEffect } from '@/object-record/record-picker-morph-legacy/components/ActivityTargetInlineCellEditModeMultiRecordsEffect';
-import { ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect } from '@/object-record/record-picker-morph-legacy/components/ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect';
 import { MultipleRecordPicker } from '@/object-record/record-picker/components/MultipleRecordPicker';
-import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { prefillRecord } from '@/object-record/utils/prefillRecord';
+import { useRef } from 'react';
 
 type ActivityTargetInlineCellEditModeProps = {
   activity: Task | Note;
@@ -257,20 +258,31 @@ export const ActivityTargetInlineCellEditMode = ({
     ],
   );
 
+  const containerRef = useRef<HTMLDivElement>(null);
+
   return (
     <>
-      <RecordPickerComponentInstanceContext.Provider
+      <ActivityTargetObjectRecordEffect
-        value={{ instanceId: recordPickerInstanceId }}
+        activityTargetWithTargetRecords={activityTargetWithTargetRecords}
-      >
+      />
-        <ActivityTargetObjectRecordEffect
+      <ActivityTargetInlineCellEditModeMultiRecordsEffect
-          activityTargetWithTargetRecords={activityTargetWithTargetRecords}
+        recordPickerInstanceId={recordPickerInstanceId}
+        selectedObjectRecordIds={selectedTargetObjectIds}
+      />
+      <ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect
+        recordPickerInstanceId={recordPickerInstanceId}
+      />
+      <MultipleObjectRecordOnClickOutsideEffect
+        containerRef={containerRef}
+        onClickOutside={closeEditableField}
+      />
+      <div ref={containerRef}>
+        <MultipleRecordPicker
+          onSubmit={handleSubmit}
+          onChange={handleChange}
+          componentInstanceId={recordPickerInstanceId}
         />
-        <ActivityTargetInlineCellEditModeMultiRecordsEffect
+      </div>
-          selectedObjectRecordIds={selectedTargetObjectIds}
-        />
-        <ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect />
-        <MultipleRecordPicker onSubmit={handleSubmit} onChange={handleChange} />
-      </RecordPickerComponentInstanceContext.Provider>
     </>
   );
 };

packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditModeMultiRecordsEffect.tsx

@@ -17,12 +17,15 @@ import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
 // Todo: this effect should be deprecated to use sync hooks
 export const ActivityTargetInlineCellEditModeMultiRecordsEffect = ({
+  recordPickerInstanceId,
   selectedObjectRecordIds,
 }: {
+  recordPickerInstanceId: string;
   selectedObjectRecordIds: SelectedObjectRecordId[];
 }) => {
   const instanceId = useAvailableComponentInstanceIdOrThrow(
     RecordPickerComponentInstanceContext,
+    recordPickerInstanceId,
   );
   const {
     objectRecordsIdsMultiSelectState,

packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect.tsx

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+import { useSetRecoilState } from 'recoil';
+
+import { useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray } from '@/activities/inline-cell/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
+import { useMultiObjectSearch } from '@/activities/inline-cell/hooks/useMultiObjectSearch';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { objectRecordMultiSelectMatchesFilterRecordsIdsComponentState } from '@/object-record/record-field/states/objectRecordMultiSelectMatchesFilterRecordsIdsComponentState';
+import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext';
+import { recordPickerSearchFilterComponentState } from '@/object-record/record-picker/states/recordPickerSearchFilterComponentState';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+
+// Todo: this effect should be deprecated to use sync hooks
+export const ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect = ({
+  recordPickerInstanceId,
+}: {
+  recordPickerInstanceId: string;
+}) => {
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    RecordPickerComponentInstanceContext,
+    recordPickerInstanceId,
+  );
+  const setRecordMultiSelectMatchesFilterRecords = useSetRecoilState(
+    objectRecordMultiSelectMatchesFilterRecordsIdsComponentState({
+      scopeId: instanceId,
+    }),
+  );
+
+  const recordPickerSearchFilter = useRecoilComponentValueV2(
+    recordPickerSearchFilterComponentState,
+    instanceId,
+  );
+
+  const { matchesSearchFilterObjectRecordsQueryResult } = useMultiObjectSearch({
+    excludedObjects: [CoreObjectNameSingular.Task, CoreObjectNameSingular.Note],
+    searchFilterValue: recordPickerSearchFilter,
+    limit: 10,
+  });
+
+  const { objectRecordForSelectArray } =
+    useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray({
+      multiObjectRecordsQueryResult:
+        matchesSearchFilterObjectRecordsQueryResult,
+    });
+
+  useEffect(() => {
+    setRecordMultiSelectMatchesFilterRecords(objectRecordForSelectArray);
+  }, [setRecordMultiSelectMatchesFilterRecords, objectRecordForSelectArray]);
+
+  return <></>;
+};

packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetsInlineCell.tsx

@@ -5,6 +5,7 @@ import { IconArrowUpRight, IconPencil } from 'twenty-ui';
 import { ActivityTargetChips } from '@/activities/components/ActivityTargetChips';
 import { useActivityTargetObjectRecords } from '@/activities/hooks/useActivityTargetObjectRecords';
 import { ActivityTargetInlineCellEditMode } from '@/activities/inline-cell/components/ActivityTargetInlineCellEditMode';
+import { useOpenActivityTargetInlineCellEditMode } from '@/activities/inline-cell/hooks/useOpenActivityTargetInlineCellEditMode';
 import { ActivityEditorHotkeyScope } from '@/activities/types/ActivityEditorHotkeyScope';
 import { Note } from '@/activities/types/Note';
 import { Task } from '@/activities/types/Task';
@@ -59,6 +60,9 @@ export const ActivityTargetsInlineCell = ({
       overridenIsFieldEmpty: activityTargetObjectRecords.length === 0,
     });
 
+  const { openActivityTargetInlineCellEditMode } =
+    useOpenActivityTargetInlineCellEditMode();
+
   return (
     <RecordFieldInputScope recordFieldInputScopeId={activity?.id ?? ''}>
       <FieldFocusContextProvider>
@@ -90,6 +94,11 @@ export const ActivityTargetsInlineCell = ({
                     maxWidth={maxWidth}
                   />
                 ),
+                onOpenEditMode: () => {
+                  openActivityTargetInlineCellEditMode({
+                    recordPickerInstanceId: `record-picker-${activity.id}`,
+                  });
+                },
               }}
             >
               <RecordInlineCellContainer />

packages/twenty-front/src/modules/activities/inline-cell/hooks/__tests__/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray.test.tsx

@@ -1,8 +1,8 @@
 import { act, renderHook } from '@testing-library/react';
 import { RecoilRoot, useSetRecoilState } from 'recoil';
 
+import { useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray } from '@/activities/inline-cell/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
-import { useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray } from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
 import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 

packages/twenty-front/src/modules/activities/inline-cell/hooks/__tests__/useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap.test.tsx

@@ -1,8 +1,8 @@
 import { act, renderHook } from '@testing-library/react';
 import { RecoilRoot, useSetRecoilState } from 'recoil';
 
+import { useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap } from '@/activities/inline-cell/hooks/useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
-import { useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap } from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap';
 import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 

packages/twenty-front/src/modules/activities/inline-cell/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray.ts

@@ -3,15 +3,10 @@ import { useRecoilValue } from 'recoil';
 
 import { objectMetadataItemsByNamePluralMapSelector } from '@/object-metadata/states/objectMetadataItemsByNamePluralMapSelector';
 import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
-import { RecordGqlConnection } from '@/object-record/graphql/types/RecordGqlConnection';
+import { MultiObjectRecordQueryResult } from '@/object-record/multiple-objects/types/MultiObjectRecordQueryResult';
-import { formatMultiObjectRecordSearchResults } from '@/object-record/record-picker-morph-legacy/utils/formatMultiObjectRecordSearchResults';
+import { formatMultiObjectRecordSearchResults } from '@/object-record/multiple-objects/utils/formatMultiObjectRecordSearchResults';
 import { ObjectRecordForSelect } from '@/object-record/types/ObjectRecordForSelect';
 import { isDefined } from 'twenty-shared';
-
-export type MultiObjectRecordQueryResult = {
-  [namePlural: string]: RecordGqlConnection;
-};
-
 export const useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray =
   ({
     multiObjectRecordsQueryResult,

packages/twenty-front/src/modules/activities/inline-cell/hooks/useMultiObjectSearch.ts

@@ -6,7 +6,7 @@ import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadat
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { EMPTY_QUERY } from '@/object-record/constants/EmptyQuery';
 import { useGenerateCombinedSearchRecordsQuery } from '@/object-record/multiple-objects/hooks/useGenerateCombinedSearchRecordsQuery';
-import { MultiObjectRecordQueryResult } from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
+import { MultiObjectRecordQueryResult } from '@/object-record/multiple-objects/types/MultiObjectRecordQueryResult';
 import { isObjectMetadataItemSearchableInCombinedRequest } from '@/object-record/utils/isObjectMetadataItemSearchableInCombinedRequest';
 import { isDefined } from 'twenty-shared';
 

packages/twenty-front/src/modules/activities/inline-cell/hooks/useMultiObjectSearchQueryResultFormattedAsObjectRecordsMap.ts

@@ -3,8 +3,8 @@ import { useRecoilValue } from 'recoil';
 
 import { objectMetadataItemsByNamePluralMapSelector } from '@/object-metadata/states/objectMetadataItemsByNamePluralMapSelector';
 import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
-import { MultiObjectRecordQueryResult } from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
+import { MultiObjectRecordQueryResult } from '@/object-record/multiple-objects/types/MultiObjectRecordQueryResult';
-import { formatMultiObjectRecordSearchResults } from '@/object-record/record-picker-morph-legacy/utils/formatMultiObjectRecordSearchResults';
+import { formatMultiObjectRecordSearchResults } from '@/object-record/multiple-objects/utils/formatMultiObjectRecordSearchResults';
 import { ObjectRecordForSelect } from '@/object-record/types/ObjectRecordForSelect';
 import { isDefined } from 'twenty-shared';
 

packages/twenty-front/src/modules/activities/inline-cell/hooks/useMultiObjectSearchSelectedItemsQuery.ts

@@ -2,14 +2,12 @@ import { gql, useQuery } from '@apollo/client';
 import { isNonEmptyArray } from '@sniptt/guards';
 import { useRecoilValue } from 'recoil';
 
+import { useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray } from '@/activities/inline-cell/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
 import { useLimitPerMetadataItem } from '@/object-metadata/hooks/useLimitPerMetadataItem';
 import { useOrderByFieldPerMetadataItem } from '@/object-metadata/hooks/useOrderByFieldPerMetadataItem';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { useGenerateCombinedFindManyRecordsQuery } from '@/object-record/multiple-objects/hooks/useGenerateCombinedFindManyRecordsQuery';
-import {
+import { MultiObjectRecordQueryResult } from '@/object-record/multiple-objects/types/MultiObjectRecordQueryResult';
-  MultiObjectRecordQueryResult,
-  useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray,
-} from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
 import { SelectedObjectRecordId } from '@/object-record/types/SelectedObjectRecordId';
 import { capitalize, isDefined } from 'twenty-shared';
 

packages/twenty-front/src/modules/activities/inline-cell/hooks/useOpenActivityTargetInlineCellEditMode.ts

@@ -0,0 +1,14 @@
+type OpenActivityTargetInlineCellEditModeProps = {
+  recordPickerInstanceId: string;
+};
+
+export const useOpenActivityTargetInlineCellEditMode = () => {
+  const openActivityTargetInlineCellEditMode = ({
+    recordPickerInstanceId,
+  }: OpenActivityTargetInlineCellEditModeProps) => {
+    // eslint-disable-next-line no-console
+    console.log('openActivityTargetInlineCellEditMode', recordPickerInstanceId);
+  };
+
+  return { openActivityTargetInlineCellEditMode };
+};

packages/twenty-front/src/modules/object-record/multiple-objects/hooks/useCombinedFindManyRecords.ts

@@ -5,7 +5,7 @@ import { EMPTY_QUERY } from '@/object-record/constants/EmptyQuery';
 import { RecordGqlOperationSignature } from '@/object-record/graphql/types/RecordGqlOperationSignature';
 import { useCombinedFindManyRecordsQueryVariables } from '@/object-record/multiple-objects/hooks/useCombinedFindManyRecordsQueryVariables';
 import { useGenerateCombinedFindManyRecordsQuery } from '@/object-record/multiple-objects/hooks/useGenerateCombinedFindManyRecordsQuery';
-import { MultiObjectRecordQueryResult } from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
+import { MultiObjectRecordQueryResult } from '@/object-record/multiple-objects/types/MultiObjectRecordQueryResult';
 
 export const useCombinedFindManyRecords = ({
   operationSignatures,

packages/twenty-front/src/modules/object-record/multiple-objects/hooks/useCombinedGetTotalCount.ts

@@ -4,7 +4,7 @@ import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { EMPTY_QUERY } from '@/object-record/constants/EmptyQuery';
 import { RecordGqlOperationSignature } from '@/object-record/graphql/types/RecordGqlOperationSignature';
 import { useGenerateCombinedFindManyRecordsQuery } from '@/object-record/multiple-objects/hooks/useGenerateCombinedFindManyRecordsQuery';
-import { MultiObjectRecordQueryResult } from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
+import { MultiObjectRecordQueryResult } from '@/object-record/multiple-objects/types/MultiObjectRecordQueryResult';
 
 export const useCombinedGetTotalCount = ({
   objectMetadataItems,

packages/twenty-front/src/modules/object-record/multiple-objects/types/MultiObjectRecordQueryResult.ts

@@ -0,0 +1,5 @@
+import { RecordGqlConnection } from '@/object-record/graphql/types/RecordGqlConnection';
+
+export type MultiObjectRecordQueryResult = {
+  [namePlural: string]: RecordGqlConnection;
+};

packages/twenty-front/src/modules/object-record/multiple-objects/utils/formatMultiObjectRecordSearchResults.ts

@@ -1,4 +1,4 @@
-import { MultiObjectRecordQueryResult } from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
+import { MultiObjectRecordQueryResult } from '@/object-record/multiple-objects/types/MultiObjectRecordQueryResult';
 
 export const formatMultiObjectRecordSearchResults = (
   searchResults: MultiObjectRecordQueryResult | undefined | null,

packages/twenty-front/src/modules/object-record/record-field/contexts/FieldContext.ts

@@ -33,6 +33,8 @@ export type GenericFieldContextType = {
   overridenIsFieldEmpty?: boolean;
   displayedMaxRows?: number;
   isDisplayModeFixHeight?: boolean;
+  onOpenEditMode?: () => void;
+  onCloseEditMode?: () => void;
 };
 
 export const FieldContext = createContext<GenericFieldContextType>(

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationFromManyFieldInput.tsx

@@ -57,6 +57,7 @@ export const RelationFromManyFieldInput = ({
       >
         <RelationFromManyFieldInputMultiRecordsEffect />
         <MultipleRecordPicker
+          componentInstanceId={recordPickerInstanceId}
           onSubmit={handleSubmit}
           onChange={updateRelation}
           onCreate={createNewRecordAndOpenRightDrawer}

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationPicker.tsx

@@ -3,11 +3,11 @@ import { IconForbid } from 'twenty-ui';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
+import { RelationPickerInitialValueEffect } from '@/object-record/record-field/meta-types/input/components/RelationPickerInitialValueEffect';
 import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/record-field/meta-types/input/hooks/useAddNewRecordAndOpenRightDrawer';
 import { RelationPickerHotkeyScope } from '@/object-record/record-field/meta-types/input/types/RelationPickerHotkeyScope';
 import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
 import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { SearchPickerInitialValueEffect } from '@/object-record/record-picker-morph-legacy/components/SearchPickerInitialValueEffect';
 import { SingleRecordPicker } from '@/object-record/record-picker/components/SingleRecordPicker';
 import { SingleRecordPickerRecord } from '@/object-record/record-picker/types/SingleRecordPickerRecord';
 
@@ -59,7 +59,7 @@ export const RelationPicker = ({
 
   return (
     <>
-      <SearchPickerInitialValueEffect
+      <RelationPickerInitialValueEffect
         initialValueForSearchFilter={initialSearchFilter}
         recordPickerInstanceId={recordPickerInstanceId}
       />

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationPickerInitialValueEffect.tsx

@@ -3,7 +3,7 @@ import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-sta
 import { useEffect } from 'react';
 
 // Todo: this effect should be deprecated to use sync hooks
-export const SearchPickerInitialValueEffect = ({
+export const RelationPickerInitialValueEffect = ({
   initialValueForSearchFilter,
   recordPickerInstanceId,
 }: {

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx

@@ -31,8 +31,14 @@ type RecordInlineCellProps = {
 };
 
 export const RecordInlineCell = ({ loading }: RecordInlineCellProps) => {
-  const { fieldDefinition, recordId, isCentered, isDisplayModeFixHeight } =
+  const {
-    useContext(FieldContext);
+    fieldDefinition,
+    recordId,
+    isCentered,
+    isDisplayModeFixHeight,
+    onOpenEditMode,
+    onCloseEditMode,
+  } = useContext(FieldContext);
   const buttonIcon = useGetButtonIcon();
 
   const isFieldInputOnly = useIsFieldInputOnly();
@@ -129,6 +135,8 @@ export const RecordInlineCell = ({ loading }: RecordInlineCellProps) => {
     isDisplayModeFixHeight: isDisplayModeFixHeight,
     editModeContentOnly: isFieldInputOnly,
     loading: loading,
+    onOpenEditMode,
+    onCloseEditMode,
   };
 
   return (

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContext.tsx

@@ -17,6 +17,8 @@ export type RecordInlineCellContextProps = {
   disableHoverEffect?: boolean;
   loading?: boolean;
   isCentered?: boolean;
+  onOpenEditMode?: () => void;
+  onCloseEditMode?: () => void;
 };
 
 const defaultRecordInlineCellContextProp: RecordInlineCellContextProps = {
@@ -34,6 +36,8 @@ const defaultRecordInlineCellContextProp: RecordInlineCellContextProps = {
   disableHoverEffect: false,
   loading: false,
   isCentered: false,
+  onOpenEditMode: undefined,
+  onCloseEditMode: undefined,
 };
 
 export const RecordInlineCellContext =

packages/twenty-front/src/modules/object-record/record-inline-cell/hooks/useInlineCell.ts

@@ -7,6 +7,7 @@ import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { isDefined } from 'twenty-shared';
 
 import { useInitDraftValueV2 } from '@/object-record/record-field/hooks/useInitDraftValueV2';
+import { useRecordInlineCellContext } from '@/object-record/record-inline-cell/components/RecordInlineCellContext';
 import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
 import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
 import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
@@ -24,6 +25,8 @@ export const useInlineCell = () => {
     isInlineCellInEditModeScopedState(recoilScopeId),
   );
 
+  const { onOpenEditMode, onCloseEditMode } = useRecordInlineCellContext();
+
   const { setActiveDropdownFocusIdAndMemorizePrevious } =
     useSetActiveDropdownFocusIdAndMemorizePrevious();
   const { goBackToPreviousDropdownFocusId } =
@@ -37,6 +40,7 @@ export const useInlineCell = () => {
   const initFieldInputDraftValue = useInitDraftValueV2();
 
   const closeInlineCell = () => {
+    onCloseEditMode?.();
     setIsInlineCellInEditMode(false);
 
     goBackToPreviousHotkeyScope();
@@ -45,6 +49,7 @@ export const useInlineCell = () => {
   };
 
   const openInlineCell = (customEditHotkeyScopeForField?: HotkeyScope) => {
+    onOpenEditMode?.();
     setIsInlineCellInEditMode(true);
     initFieldInputDraftValue({ recordId, fieldDefinition });
 

packages/twenty-front/src/modules/object-record/record-picker-morph-legacy/components/ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect.tsx

@@ -1,51 +0,0 @@
-import { useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
-
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { objectRecordMultiSelectMatchesFilterRecordsIdsComponentState } from '@/object-record/record-field/states/objectRecordMultiSelectMatchesFilterRecordsIdsComponentState';
-import { useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray } from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray';
-import { useMultiObjectSearch } from '@/object-record/record-picker-morph-legacy/hooks/useMultiObjectSearch';
-import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext';
-import { recordPickerSearchFilterComponentState } from '@/object-record/record-picker/states/recordPickerSearchFilterComponentState';
-import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-
-// Todo: this effect should be deprecated to use sync hooks
-export const ActivityTargetInlineCellEditModeMultiRecordsSearchFilterEffect =
-  () => {
-    const instanceId = useAvailableComponentInstanceIdOrThrow(
-      RecordPickerComponentInstanceContext,
-    );
-    const setRecordMultiSelectMatchesFilterRecords = useSetRecoilState(
-      objectRecordMultiSelectMatchesFilterRecordsIdsComponentState({
-        scopeId: instanceId,
-      }),
-    );
-
-    const recordPickerSearchFilter = useRecoilComponentValueV2(
-      recordPickerSearchFilterComponentState,
-      instanceId,
-    );
-
-    const { matchesSearchFilterObjectRecordsQueryResult } =
-      useMultiObjectSearch({
-        excludedObjects: [
-          CoreObjectNameSingular.Task,
-          CoreObjectNameSingular.Note,
-        ],
-        searchFilterValue: recordPickerSearchFilter,
-        limit: 10,
-      });
-
-    const { objectRecordForSelectArray } =
-      useMultiObjectRecordsQueryResultFormattedAsObjectRecordForSelectArray({
-        multiObjectRecordsQueryResult:
-          matchesSearchFilterObjectRecordsQueryResult,
-      });
-
-    useEffect(() => {
-      setRecordMultiSelectMatchesFilterRecords(objectRecordForSelectArray);
-    }, [setRecordMultiSelectMatchesFilterRecords, objectRecordForSelectArray]);
-
-    return <></>;
-  };

packages/twenty-front/src/modules/object-record/record-picker/components/MultipleRecordPicker.tsx

@@ -33,22 +33,27 @@ export const StyledSelectableItem = styled(SelectableItem)`
   width: 100%;
 `;
 
+type MultipleRecordPickerProps = {
+  onChange?: (changedRecordForSelectId: string) => void;
+  onSubmit?: () => void;
+  onCreate?: ((searchInput?: string) => void) | (() => void);
+  dropdownPlacement?: Placement | null;
+  componentInstanceId: string;
+};
+
 export const MultipleRecordPicker = ({
   onChange,
   onSubmit,
   onCreate,
   dropdownPlacement,
-}: {
+  componentInstanceId,
-  onChange?: (changedRecordForSelectId: string) => void;
+}: MultipleRecordPickerProps) => {
-  onSubmit?: () => void;
-  onCreate?: ((searchInput?: string) => void) | (() => void);
-  dropdownPlacement?: Placement | null;
-}) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const { goBackToPreviousHotkeyScope } = usePreviousHotkeyScope();
 
   const instanceId = useAvailableComponentInstanceIdOrThrow(
     RecordPickerComponentInstanceContext,
+    componentInstanceId,
   );
 
   const { objectRecordsIdsMultiSelectState, recordMultiSelectIsLoadingState } =
@@ -143,49 +148,57 @@ export const MultipleRecordPicker = ({
   );
 
   return (
-    <DropdownMenu ref={containerRef} data-select-disable width={200}>
+    <RecordPickerComponentInstanceContext.Provider
-      {dropdownPlacement?.includes('end') && (
+      value={{ instanceId: componentInstanceId }}
-        <>
+    >
-          {isDefined(onCreate) && !hasObjectReadOnlyPermission && (
+      <DropdownMenu ref={containerRef} data-select-disable width={200}>
-            <DropdownMenuItemsContainer scrollable={false}>
+        {dropdownPlacement?.includes('end') && (
-              {createNewButton}
+          <>
-            </DropdownMenuItemsContainer>
+            {isDefined(onCreate) && !hasObjectReadOnlyPermission && (
-          )}
+              <DropdownMenuItemsContainer scrollable={false}>
-          <DropdownMenuSeparator />
+                {createNewButton}
-          {objectRecordsIdsMultiSelect?.length > 0 && results}
+              </DropdownMenuItemsContainer>
-          {recordMultiSelectIsLoading && !recordPickerSearchFilter && (
+            )}
-            <>
+            <DropdownMenuSeparator />
-              <DropdownMenuSkeletonItem />
+            {objectRecordsIdsMultiSelect?.length > 0 && results}
+            {recordMultiSelectIsLoading && !recordPickerSearchFilter && (
+              <>
+                <DropdownMenuSkeletonItem />
+                <DropdownMenuSeparator />
+              </>
+            )}
+            {objectRecordsIdsMultiSelect?.length > 0 && (
               <DropdownMenuSeparator />
-            </>
+            )}
-          )}
+          </>
-          {objectRecordsIdsMultiSelect?.length > 0 && <DropdownMenuSeparator />}
+        )}
-        </>
+        <DropdownMenuSearchInput
-      )}
+          value={recordPickerSearchFilter}
-      <DropdownMenuSearchInput
+          onChange={handleFilterChange}
-        value={recordPickerSearchFilter}
+          autoFocus
-        onChange={handleFilterChange}
+        />
-        autoFocus
+        {(dropdownPlacement?.includes('start') ||
-      />
+          isUndefinedOrNull(dropdownPlacement)) && (
-      {(dropdownPlacement?.includes('start') ||
+          <>
-        isUndefinedOrNull(dropdownPlacement)) && (
+            <DropdownMenuSeparator />
-        <>
+            {recordMultiSelectIsLoading && !recordPickerSearchFilter && (
-          <DropdownMenuSeparator />
+              <>
-          {recordMultiSelectIsLoading && !recordPickerSearchFilter && (
+                <DropdownMenuSkeletonItem />
-            <>
+                <DropdownMenuSeparator />
-              <DropdownMenuSkeletonItem />
+              </>
+            )}
+            {objectRecordsIdsMultiSelect?.length > 0 && results}
+            {objectRecordsIdsMultiSelect?.length > 0 && (
               <DropdownMenuSeparator />
-            </>
+            )}
-          )}
+            {isDefined(onCreate) && (
-          {objectRecordsIdsMultiSelect?.length > 0 && results}
+              <DropdownMenuItemsContainer scrollable={false}>
-          {objectRecordsIdsMultiSelect?.length > 0 && <DropdownMenuSeparator />}
+                {createNewButton}
-          {isDefined(onCreate) && (
+              </DropdownMenuItemsContainer>
-            <DropdownMenuItemsContainer scrollable={false}>
+            )}
-              {createNewButton}
+          </>
-            </DropdownMenuItemsContainer>
+        )}
-          )}
+      </DropdownMenu>
-        </>
+    </RecordPickerComponentInstanceContext.Provider>
-      )}
-    </DropdownMenu>
   );
 };

packages/twenty-front/src/modules/object-record/record-picker/components/__stories__/SingleRecordPicker.stories.tsx

@@ -5,7 +5,6 @@ import { ComponentDecorator, IconUserCircle } from 'twenty-ui';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
-import { RecordPickerDecorator } from '~/testing/decorators/RecordPickerDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { getPeopleMock } from '~/testing/mock-data/people';
@@ -30,7 +29,6 @@ const meta: Meta<typeof SingleRecordPicker> = {
   decorators: [
     ComponentDecorator,
     ComponentWithRecoilScopeDecorator,
-    RecordPickerDecorator,
     ObjectMetadataItemsDecorator,
     SnackBarDecorator,
   ],

packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx

@@ -219,6 +219,7 @@ export const RecordDetailRelationSection = ({
                       <>
                         <RelationFromManyFieldInputMultiRecordsEffect />
                         <MultipleRecordPicker
+                          componentInstanceId={dropdownId}
                           onCreate={() => {
                             closeDropdown();
                             createNewRecordAndOpenRightDrawer?.();

packages/twenty-front/src/testing/decorators/RecordPickerDecorator.tsx

@@ -1,10 +0,0 @@
-import { RecordPickerComponentInstanceContext } from '@/object-record/record-picker/states/contexts/RecordPickerComponentInstanceContext';
-import { Decorator } from '@storybook/react';
-
-export const RecordPickerDecorator: Decorator = (Story) => (
-  <RecordPickerComponentInstanceContext.Provider
-    value={{ instanceId: 'record-picker-decorator-instance-id' }}
-  >
-    <Story />
-  </RecordPickerComponentInstanceContext.Provider>
-);