diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
index 5cad617bf..8004cf94b 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
+++ b/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>
           )
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
index 6c32ba218..567ce6752 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
+++ b/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;