fix: prevent duplicate dropdowns in activity targets when editing in different contexts (#12462)

Closes #12361

### Changes Made

- In `ActivityTargetsInlineCell`, we now use different component
instance IDs based on context. This ensures that each instance of the
component (whether in right drawer or main view) has its own isolated
state, preventing state conflicts and duplicate dropdowns.
- The `MultipleRecordPicker` component now properly resets its state
when closed, preventing state leakage between instances.


https://github.com/user-attachments/assets/deb99687-a803-417e-a339-cab061026739

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

@@ -0,0 +1,11 @@
+import { useIsInRightDrawerOrThrow } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
+
+export const useActivityTargetsComponentInstanceId = (
+  baseComponentInstanceId: string,
+) => {
+  const { isInRightDrawer } = useIsInRightDrawerOrThrow();
+
+  return isInRightDrawer
+    ? `${baseComponentInstanceId}-right-drawer`
+    : baseComponentInstanceId;
+};

packages/twenty-front/src/modules/activities/notes/components/NoteCard.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 
 import { ActivityTargetsInlineCell } from '@/activities/inline-cell/components/ActivityTargetsInlineCell';
+import { useActivityTargetsComponentInstanceId } from '@/activities/inline-cell/hooks/useActivityTargetsComponentInstanceId';
 import { Note } from '@/activities/types/Note';
 import { getActivityPreview } from '@/activities/utils/getActivityPreview';
 import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
@@ -72,6 +73,11 @@ export const NoteCard = ({
 
   const body = getActivityPreview(note?.bodyV2?.blocknote ?? null);
 
+  const baseComponentInstanceId = `note-card-${note.id}-targets`;
+  const componentInstanceId = useActivityTargetsComponentInstanceId(
+    baseComponentInstanceId,
+  );
+
   return (
     <StyledCard isSingleNote={isSingleNote}>
       <StyledCardDetailsContainer
@@ -93,7 +99,7 @@ export const NoteCard = ({
           fieldPosition={0}
         >
           <ActivityTargetsInlineCell
-            componentInstanceId={`note-card-${note.id}-targets`}
+            componentInstanceId={componentInstanceId}
             activityRecordId={note.id}
             activityObjectNameSingular={CoreObjectNameSingular.Note}
           />

packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx

@@ -6,6 +6,7 @@ import { getActivitySummary } from '@/activities/utils/getActivitySummary';
 import { beautifyExactDate, hasDatePassed } from '~/utils/date-utils';
 
 import { ActivityRow } from '@/activities/components/ActivityRow';
+import { useActivityTargetsComponentInstanceId } from '@/activities/inline-cell/hooks/useActivityTargetsComponentInstanceId';
 import { Task } from '@/activities/types/Task';
 import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -81,6 +82,11 @@ export const TaskRow = ({ task }: { task: Task }) => {
 
   const { completeTask } = useCompleteTask(task);
 
+  const baseComponentInstanceId = `task-row-targets-${task.id}`;
+  const componentInstanceId = useActivityTargetsComponentInstanceId(
+    baseComponentInstanceId,
+  );
+
   return (
     <ActivityRow
       onClick={() => {
@@ -131,7 +137,7 @@ export const TaskRow = ({ task }: { task: Task }) => {
                 activityRecordId={task.id}
                 showLabel={false}
                 maxWidth={200}
-                componentInstanceId={`task-row-targets-${task.id}`}
+                componentInstanceId={componentInstanceId}
               />
             </StopPropagationContainer>
           </FieldContextProvider>