Fix click outside for RecordDetailRelationSection (#11072)

Fixes https://github.com/twentyhq/twenty/issues/11061

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

@@ -262,6 +262,7 @@ export const RecordDetailRelationSection = ({
                     accent="tertiary"
                   />
                 }
+                dropdownHotkeyScope={{ scope: dropdownId }}
                 dropdownComponents={
                   isToOneObject ? (
                     <SingleRecordPicker
@@ -271,6 +272,7 @@ export const RecordDetailRelationSection = ({
                       objectNameSingular={relationObjectMetadataNameSingular}
                       recordPickerInstanceId={dropdownId}
                       onCreate={createNewRecordAndOpenRightDrawer}
+                      onCancel={closeDropdown}
                       layoutDirection={
                         dropdownPlacement?.includes('end')
                           ? 'search-bar-on-bottom'
@@ -295,7 +297,6 @@ export const RecordDetailRelationSection = ({
                     />
                   )
                 }
-                dropdownHotkeyScope={{ scope: dropdownId }}
               />
             </DropdownScope>
           )

packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx

@@ -15,12 +15,12 @@ import {
   useFloating,
 } from '@floating-ui/react';
 import { MouseEvent, ReactNode } from 'react';
+import { flushSync } from 'react-dom';
 import { Keys } from 'react-hotkeys-hook';
 import { useRecoilCallback } from 'recoil';
 import { isDefined } from 'twenty-shared';
 import { sleep } from '~/utils/sleep';
 import { useDropdown } from '../hooks/useDropdown';
-import { flushSync } from 'react-dom';
 
 const StyledDropdownFallbackAnchor = styled.div`
   left: 0;