Refactor and fixes dropdown bugs (#8807)

Fixes https://github.com/twentyhq/twenty/issues/8788
Fixes https://github.com/twentyhq/twenty/issues/8793
Fixes https://github.com/twentyhq/twenty/issues/8791
Fixes https://github.com/twentyhq/twenty/issues/8890
Fixes https://github.com/twentyhq/twenty/issues/8893

- [x] Also : 

Icon buttons under dropdown are visible without blur : 

![Capture d’écran du 2024-11-29
15-09-53](https://github.com/user-attachments/assets/f563333d-4e43-4ded-acc7-62e116004ed9)

- [x] Also : 

<img width="237" alt="image"
src="https://github.com/user-attachments/assets/e4c70936-beff-4481-89cb-0a32a36e0ee2">

- [x] Also : 

<img width="335" alt="image"
src="https://github.com/user-attachments/assets/5be60395-6baf-49eb-8d40-197add049e20">

- [x] Also : 

<img width="287" alt="image"
src="https://github.com/user-attachments/assets/a317561f-7986-4d70-a1c0-deee4f4e268a">

- Button create new without padding
- Container is expanding

- [x] Also : 

<img width="303" alt="image"
src="https://github.com/user-attachments/assets/09f8a27f-91db-4191-acdc-aaaeedaf6da5">

- [x] Also : 

<img width="133" alt="image"
src="https://github.com/user-attachments/assets/fe17b32e-f7a4-46c4-8040-239eaf8198e8">

Font is cut at bottom ?

- [x] Also : 

<img width="385" alt="image"
src="https://github.com/user-attachments/assets/7bab2092-2936-4112-a2ee-d32d6737e304">

The component should flip and not resize in this situation

- [x] Also : 

<img width="244" alt="image"
src="https://github.com/user-attachments/assets/5384f49a-71f9-4638-a60c-158cc8c83f81">

- [x] Also : 


![image](https://github.com/user-attachments/assets/9cd1f43a-df59-401e-9a41-bdb8e93ebe58)

packages/twenty-front/src/generated/graphql.tsx

@@ -1,5 +1,5 @@
-import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
+import { gql } from '@apollo/client';
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };

packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuDropdown.stories.tsx

@@ -14,7 +14,12 @@ import {
 } from '@/action-menu/types/ActionMenuEntry';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
-import { IconCheckbox, IconHeart, IconTrash } from 'twenty-ui';
+import {
+  IconCheckbox,
+  IconHeart,
+  IconTrash,
+  getCanvasElementForDropdownTesting,
+} from 'twenty-ui';
 
 const deleteMock = jest.fn();
 const markAsDoneMock = jest.fn();
@@ -107,7 +112,9 @@ export const WithInteractions: Story = {
   args: {
     actionMenuId: 'story',
   },
-  play: async ({ canvasElement }) => {
+  play: async () => {
+    const canvasElement = getCanvasElementForDropdownTesting();
+
     const canvas = within(canvasElement);
 
     const deleteButton = await canvas.findByText('Delete');

packages/twenty-front/src/modules/action-menu/components/__stories__/RightDrawerActionMenuDropdown.stories.tsx

@@ -15,6 +15,7 @@ import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/s
 import { userEvent, waitFor, within } from '@storybook/test';
 import {
   ComponentDecorator,
+  getCanvasElementForDropdownTesting,
   IconFileExport,
   IconHeart,
   IconTrash,
@@ -117,8 +118,8 @@ export const WithButtonClicks: Story = {
   args: {
     actionMenuId: 'story-action-menu',
   },
-  play: async ({ canvasElement }) => {
+  play: async () => {
-    const canvas = within(canvasElement);
+    const canvas = within(getCanvasElementForDropdownTesting());
 
     let actionButton = await canvas.findByText('Actions');
     await userEvent.click(actionButton);

packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx

@@ -32,7 +32,7 @@ import { SelectableItem } from '@/ui/layout/selectable-list/components/Selectabl
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
-import { useListenClickOutsideV2 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@@ -414,7 +414,7 @@ export const CommandMenu = () => {
       cmd.scope === CommandScope.Global,
   );
 
-  useListenClickOutsideV2({
+  useListenClickOutside({
     refs: [commandMenuRef],
     callback: closeCommandMenu,
     listenerId: 'COMMAND_MENU_LISTENER_ID',

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx

@@ -16,7 +16,6 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
-import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
@@ -167,43 +166,41 @@ export const ObjectFilterDropdownFilterSelect = ({
           setObjectFilterDropdownSearchInput(event.target.value)
         }
       />
-      <ScrollWrapper contextProviderName="dropdownMenuItemsContainer">
+      <SelectableList
-        <SelectableList
+        hotkeyScope={FiltersHotkeyScope.ObjectFilterDropdownButton}
-          hotkeyScope={FiltersHotkeyScope.ObjectFilterDropdownButton}
+        selectableItemIdArray={selectableListItemIds}
-          selectableItemIdArray={selectableListItemIds}
+        selectableListId={OBJECT_FILTER_DROPDOWN_ID}
-          selectableListId={OBJECT_FILTER_DROPDOWN_ID}
+        onEnter={handleEnter}
-          onEnter={handleEnter}
+      >
-        >
+        <DropdownMenuItemsContainer>
-          <DropdownMenuItemsContainer>
+          {visibleColumnsFilterDefinitions.map(
-            {visibleColumnsFilterDefinitions.map(
+            (visibleFilterDefinition, index) => (
-              (visibleFilterDefinition, index) => (
+              <SelectableItem
-                <SelectableItem
+                itemId={visibleFilterDefinition.fieldMetadataId}
-                  itemId={visibleFilterDefinition.fieldMetadataId}
+                key={`visible-select-filter-${index}`}
-                  key={`visible-select-filter-${index}`}
+              >
-                >
+                <ObjectFilterDropdownFilterSelectMenuItem
-                  <ObjectFilterDropdownFilterSelectMenuItem
+                  filterDefinition={visibleFilterDefinition}
-                    filterDefinition={visibleFilterDefinition}
+                />
-                  />
+              </SelectableItem>
-                </SelectableItem>
+            ),
-              ),
+          )}
-            )}
+          {shoudShowSeparator && <DropdownMenuSeparator />}
-            {shoudShowSeparator && <DropdownMenuSeparator />}
+          {hiddenColumnsFilterDefinitions.map(
-            {hiddenColumnsFilterDefinitions.map(
+            (hiddenFilterDefinition, index) => (
-              (hiddenFilterDefinition, index) => (
+              <SelectableItem
-                <SelectableItem
+                itemId={hiddenFilterDefinition.fieldMetadataId}
-                  itemId={hiddenFilterDefinition.fieldMetadataId}
+                key={`hidden-select-filter-${index}`}
-                  key={`hidden-select-filter-${index}`}
+              >
-                >
+                <ObjectFilterDropdownFilterSelectMenuItem
-                  <ObjectFilterDropdownFilterSelectMenuItem
+                  filterDefinition={hiddenFilterDefinition}
-                    filterDefinition={hiddenFilterDefinition}
+                />
-                  />
+              </SelectableItem>
-                </SelectableItem>
+            ),
-              ),
+          )}
-            )}
+        </DropdownMenuItemsContainer>
-          </DropdownMenuItemsContainer>
+      </SelectableList>
-        </SelectableList>
+      {shouldShowAdvancedFilterButton && <AdvancedFilterButton />}
-        {shouldShowAdvancedFilterButton && <AdvancedFilterButton />}
-      </ScrollWrapper>
     </>
   );
 };

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown.tsx

@@ -28,9 +28,11 @@ export const ObjectFilterDropdownOperandDropdown = ({
 
   const theme = useTheme();
 
+  const dropdownId = `${filterDropdownId}-operand-dropdown`;
+
   return (
     <Dropdown
-      dropdownId={`${filterDropdownId}-operand-dropdown`}
+      dropdownId={dropdownId}
       clickableComponent={
         <StyledDropdownMenuHeader
           key={'selected-filter-operand'}

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx

@@ -15,7 +15,6 @@ import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/inter
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { MenuItem, MenuItemMultiSelect } from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 
@@ -163,23 +162,21 @@ export const ObjectFilterDropdownOptionSelect = () => {
         }
       }}
     >
-      <ScrollWrapper contextProviderName="dropdownMenuItemsContainer">
+      <DropdownMenuItemsContainer hasMaxHeight>
-        <DropdownMenuItemsContainer hasMaxHeight>
+        {optionsInDropdown?.map((option) => (
-          {optionsInDropdown?.map((option) => (
+          <MenuItemMultiSelect
-            <MenuItemMultiSelect
+            key={option.id}
-              key={option.id}
+            selected={option.isSelected}
-              selected={option.isSelected}
+            isKeySelected={option.id === selectedItemId}
-              isKeySelected={option.id === selectedItemId}
+            onSelectChange={(selected) =>
-              onSelectChange={(selected) =>
+              handleMultipleOptionSelectChange(option, selected)
-                handleMultipleOptionSelectChange(option, selected)
+            }
-              }
+            text={option.label}
-              text={option.label}
+            color={option.color}
-              color={option.color}
+            className=""
-              className=""
+          />
-            />
+        ))}
-          ))}
+      </DropdownMenuItemsContainer>
-        </DropdownMenuItemsContainer>
-      </ScrollWrapper>
       {showNoResult && <MenuItem text="No result" />}
     </SelectableList>
   );

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/__stories__/MultipleFiltersDropdownButton.stories.tsx

@@ -11,7 +11,10 @@ import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-sta
 import { availableFilterDefinitionsComponentState } from '@/views/states/availableFilterDefinitionsComponentState';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
 import { within } from '@storybook/test';
-import { ComponentDecorator } from 'twenty-ui';
+import {
+  ComponentDecorator,
+  getCanvasElementForDropdownTesting,
+} from 'twenty-ui';
 import { FieldMetadataType } from '~/generated/graphql';
 import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
@@ -120,7 +123,7 @@ type Story = StoryObj<typeof TaskGroups>;
 
 export const Default: Story = {
   play: async () => {
-    const canvas = within(document.body);
+    const canvas = within(getCanvasElementForDropdownTesting());
 
     const filterButton = await canvas.findByText('Filter');
 
@@ -142,7 +145,7 @@ export const Default: Story = {
 
 export const Date: Story = {
   play: async () => {
-    const canvas = within(document.body);
+    const canvas = within(getCanvasElementForDropdownTesting());
 
     const filterButton = await canvas.findByText('Filter');
 
@@ -156,7 +159,7 @@ export const Date: Story = {
 
 export const Number: Story = {
   play: async () => {
-    const canvas = within(document.body);
+    const canvas = within(getCanvasElementForDropdownTesting());
 
     const filterButton = await canvas.findByText('Filter');
 

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownFieldsContent.tsx

@@ -6,7 +6,6 @@ import { useOptionsDropdown } from '@/object-record/object-options-dropdown/hook
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection';
 import { ViewType } from '@/views/types/ViewType';
 
@@ -53,19 +52,17 @@ export const ObjectOptionsDropdownFieldsContent = () => {
       <DropdownMenuHeader StartIcon={IconChevronLeft} onClick={resetContent}>
         Fields
       </DropdownMenuHeader>
-      <ScrollWrapper contextProviderName="dropdownMenuItemsContainer">
+      <ViewFieldsVisibilityDropdownSection
-        <ViewFieldsVisibilityDropdownSection
+        title="Visible"
-          title="Visible"
+        fields={visibleRecordFields}
-          fields={visibleRecordFields}
+        isDraggable
-          isDraggable
+        onDragEnd={handleReorderFields}
-          onDragEnd={handleReorderFields}
+        onVisibilityChange={handleChangeFieldVisibility}
-          onVisibilityChange={handleChangeFieldVisibility}
+        showSubheader={false}
-          showSubheader={false}
+        showDragGrip={true}
-          showDragGrip={true}
+      />
-        />
-      </ScrollWrapper>
       <DropdownMenuSeparator />
-      <DropdownMenuItemsContainer>
+      <DropdownMenuItemsContainer withoutScrollWrapper>
         <MenuItemNavigate
           onClick={() => onContentChange('hiddenFields')}
           LeftIcon={IconEyeOff}

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx

@@ -18,7 +18,6 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
-import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection';
 import { ViewType } from '@/views/types/ViewType';
 
@@ -71,19 +70,16 @@ export const ObjectOptionsDropdownHiddenFieldsContent = () => {
         Hidden Fields
       </DropdownMenuHeader>
       {hiddenRecordFields.length > 0 && (
-        <ScrollWrapper contextProviderName="dropdownMenuItemsContainer">
+        <ViewFieldsVisibilityDropdownSection
-          <ViewFieldsVisibilityDropdownSection
+          title="Hidden"
-            title="Hidden"
+          fields={hiddenRecordFields}
-            fields={hiddenRecordFields}
+          isDraggable={false}
-            isDraggable={false}
+          onVisibilityChange={handleChangeFieldVisibility}
-            onVisibilityChange={handleChangeFieldVisibility}
+          showSubheader={false}
-            showSubheader={false}
+          showDragGrip={false}
-            showDragGrip={false}
+        />
-          />
-        </ScrollWrapper>
       )}
       <DropdownMenuSeparator />
-
       <UndecoratedLink
         to={settingsUrl}
         onClick={() => {
@@ -91,7 +87,7 @@ export const ObjectOptionsDropdownHiddenFieldsContent = () => {
           closeDropdown();
         }}
       >
-        <DropdownMenuItemsContainer>
+        <DropdownMenuItemsContainer withoutScrollWrapper>
           <MenuItem LeftIcon={IconSettings} text="Edit Fields" />
         </DropdownMenuItemsContainer>
       </UndecoratedLink>

packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx

@@ -15,7 +15,6 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
-import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useContext } from 'react';
 import { SORT_DIRECTIONS } from '../types/SortDirection';
@@ -184,39 +183,37 @@ export const ObjectSortDropdownButton = ({
                 setObjectSortDropdownSearchInput(event.target.value)
               }
             />
-            <ScrollWrapper contextProviderName="dropdownMenuItemsContainer">
+            <DropdownMenuItemsContainer>
-              <DropdownMenuItemsContainer>
+              {visibleColumnsSortDefinitions.map(
-                {visibleColumnsSortDefinitions.map(
+                (visibleSortDefinition, index) => (
-                  (visibleSortDefinition, index) => (
+                  <MenuItem
-                    <MenuItem
+                    testId={`visible-select-sort-${index}`}
-                      testId={`visible-select-sort-${index}`}
+                    key={index}
-                      key={index}
+                    onClick={() => {
-                      onClick={() => {
+                      setObjectSortDropdownSearchInput('');
-                        setObjectSortDropdownSearchInput('');
+                      handleAddSort(visibleSortDefinition);
-                        handleAddSort(visibleSortDefinition);
+                    }}
-                      }}
+                    LeftIcon={getIcon(visibleSortDefinition.iconName)}
-                      LeftIcon={getIcon(visibleSortDefinition.iconName)}
+                    text={visibleSortDefinition.label}
-                      text={visibleSortDefinition.label}
+                  />
-                    />
+                ),
-                  ),
+              )}
-                )}
+              {shoudShowSeparator && <DropdownMenuSeparator />}
-                {shoudShowSeparator && <DropdownMenuSeparator />}
+              {hiddenColumnsSortDefinitions.map(
-                {hiddenColumnsSortDefinitions.map(
+                (hiddenSortDefinition, index) => (
-                  (hiddenSortDefinition, index) => (
+                  <MenuItem
-                    <MenuItem
+                    testId={`hidden-select-sort-${index}`}
-                      testId={`hidden-select-sort-${index}`}
+                    key={index}
-                      key={index}
+                    onClick={() => {
-                      onClick={() => {
+                      setObjectSortDropdownSearchInput('');
-                        setObjectSortDropdownSearchInput('');
+                      handleAddSort(hiddenSortDefinition);
-                        handleAddSort(hiddenSortDefinition);
+                    }}
-                      }}
+                    LeftIcon={getIcon(hiddenSortDefinition.iconName)}
-                      LeftIcon={getIcon(hiddenSortDefinition.iconName)}
+                    text={hiddenSortDefinition.label}
-                      text={hiddenSortDefinition.label}
+                  />
-                    />
+                ),
-                  ),
+              )}
-                )}
+            </DropdownMenuItemsContainer>
-              </DropdownMenuItemsContainer>
-            </ScrollWrapper>
           </>
         }
         onClose={handleDropdownButtonClose}

packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx

@@ -22,7 +22,7 @@ import { recordStoreFamilyState } from '@/object-record/record-store/states/reco
 import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
 import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { useListenClickOutsideV2 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
@@ -81,7 +81,7 @@ export const RecordBoard = () => {
   const { resetRecordSelection, setRecordAsSelected } =
     useRecordBoardSelection(recordBoardId);
 
-  useListenClickOutsideV2({
+  useListenClickOutside({
     excludeClassNames: [
       'bottom-bar',
       'action-menu-dropdown',

packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx

@@ -34,6 +34,7 @@ export const RecordBoardColumnDropdownMenu = ({
   useListenClickOutside({
     refs: [boardColumnMenuRef],
     callback: closeMenu,
+    listenerId: 'record-board-column-dropdown-menu',
   });
 
   return (

packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx

@@ -48,7 +48,10 @@ type FieldInputProps = {
   recordFieldInputdId: string;
   onSubmit?: FieldInputEvent;
   onCancel?: () => void;
-  onClickOutside?: FieldInputEvent;
+  onClickOutside?: (
+    persist: () => void,
+    event: MouseEvent | TouchEvent,
+  ) => void;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
   onTab?: FieldInputEvent;
@@ -78,7 +81,10 @@ export const FieldInput = ({
       ) : isFieldRelationFromManyObjects(fieldDefinition) ? (
         <RelationFromManyFieldInput onSubmit={onSubmit} />
       ) : isFieldPhones(fieldDefinition) ? (
-        <PhonesFieldInput onCancel={onCancel} />
+        <PhonesFieldInput
+          onCancel={onCancel}
+          onClickOutside={(event) => onClickOutside?.(() => {}, event)}
+        />
       ) : isFieldText(fieldDefinition) ? (
         <TextFieldInput
           onEnter={onEnter}
@@ -88,7 +94,10 @@ export const FieldInput = ({
           onShiftTab={onShiftTab}
         />
       ) : isFieldEmails(fieldDefinition) ? (
-        <EmailsFieldInput onCancel={onCancel} />
+        <EmailsFieldInput
+          onCancel={onCancel}
+          onClickOutside={(event) => onClickOutside?.(() => {}, event)}
+        />
       ) : isFieldFullName(fieldDefinition) ? (
         <FullNameFieldInput
           onEnter={onEnter}
@@ -122,7 +131,10 @@ export const FieldInput = ({
           onShiftTab={onShiftTab}
         />
       ) : isFieldLinks(fieldDefinition) ? (
-        <LinksFieldInput onCancel={onCancel} />
+        <LinksFieldInput
+          onCancel={onCancel}
+          onClickOutside={(event) => onClickOutside?.(() => {}, event)}
+        />
       ) : isFieldCurrency(fieldDefinition) ? (
         <CurrencyFieldInput
           onEnter={onEnter}
@@ -158,7 +170,10 @@ export const FieldInput = ({
       ) : isFieldRichText(fieldDefinition) ? (
         <RichTextFieldInput />
       ) : isFieldArray(fieldDefinition) ? (
-        <ArrayFieldInput onCancel={onCancel} />
+        <ArrayFieldInput
+          onCancel={onCancel}
+          onClickOutside={(event) => onClickOutside?.(() => {}, event)}
+        />
       ) : (
         <></>
       )}

packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx

@@ -108,9 +108,6 @@ export const FormSelectFieldInput = ({
     goBackToPreviousHotkeyScope();
   };
 
-  const [selectWrapperRef, setSelectWrapperRef] =
-    useState<HTMLDivElement | null>(null);
-
   const [filteredOptions, setFilteredOptions] = useState<SelectOption[]>([]);
 
   const { resetSelectedItem } = useSelectableList(
@@ -206,7 +203,6 @@ export const FormSelectFieldInput = ({
 
       <StyledFormFieldInputRowContainer>
         <StyledFormFieldInputInputContainer
-          ref={setSelectWrapperRef}
           hasRightElement={isDefined(VariablePicker)}
         >
           {draftValue.type === 'static' ? (
@@ -231,7 +227,6 @@ export const FormSelectFieldInput = ({
                   selectableItemIdArray={optionIds}
                   hotkeyScope={hotkeyScope}
                   onEnter={handleSelectEnter}
-                  selectWrapperRef={selectWrapperRef}
                   onOptionSelected={handleSubmit}
                   options={field.metadata.options}
                   onCancel={onCancel}

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

@@ -4,10 +4,13 @@ import { AddressInput } from '@/ui/field/input/components/AddressInput';
 
 import { usePersistField } from '../../../hooks/usePersistField';
 
-import { FieldInputEvent } from './DateTimeFieldInput';
+import {
+  FieldInputClickOutsideEvent,
+  FieldInputEvent,
+} from './DateTimeFieldInput';
 
 export type AddressFieldInputProps = {
-  onClickOutside?: FieldInputEvent;
+  onClickOutside?: FieldInputClickOutsideEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
   onTab?: FieldInputEvent;
@@ -60,7 +63,7 @@ export const AddressFieldInput = ({
     event: MouseEvent | TouchEvent,
     newAddress: FieldAddressDraftValue,
   ) => {
-    onClickOutside?.(() => persistField(convertToAddress(newAddress)));
+    onClickOutside?.(() => persistField(convertToAddress(newAddress)), event);
   };
 
   const handleChange = (newAddress: FieldAddressDraftValue) => {

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

@@ -6,9 +6,13 @@ import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 type ArrayFieldInputProps = {
   onCancel?: () => void;
+  onClickOutside?: (event: MouseEvent | TouchEvent) => void;
 };
 
-export const ArrayFieldInput = ({ onCancel }: ArrayFieldInputProps) => {
+export const ArrayFieldInput = ({
+  onCancel,
+  onClickOutside,
+}: ArrayFieldInputProps) => {
   const { persistArrayField, hotkeyScope, fieldValue } = useArrayField();
 
   const arrayItems = useMemo<Array<string>>(
@@ -23,6 +27,7 @@ export const ArrayFieldInput = ({ onCancel }: ArrayFieldInputProps) => {
       items={arrayItems}
       onPersist={persistArrayField}
       onCancel={onCancel}
+      onClickOutside={onClickOutside}
       placeholder="Enter value"
       fieldMetadataType={FieldMetadataType.Array}
       renderItem={({ value, index, handleEdit, handleDelete }) => (

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

@@ -8,10 +8,13 @@ import { FieldInputOverlay } from '../../../../../ui/field/input/components/Fiel
 import { useCurrencyField } from '../../hooks/useCurrencyField';
 
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
-import { FieldInputEvent } from './DateTimeFieldInput';
+import {
+  FieldInputClickOutsideEvent,
+  FieldInputEvent,
+} from './DateTimeFieldInput';
 
 type CurrencyFieldInputProps = {
-  onClickOutside?: FieldInputEvent;
+  onClickOutside?: FieldInputClickOutsideEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
   onTab?: FieldInputEvent;
@@ -79,7 +82,7 @@ export const CurrencyFieldInput = ({
         amountText: newValue,
         currencyCode,
       });
-    });
+    }, event);
   };
 
   const handleTab = (newValue: string) => {

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

@@ -5,11 +5,12 @@ import { DateInput } from '@/ui/field/input/components/DateInput';
 import { isDefined } from '~/utils/isDefined';
 
 import { usePersistField } from '../../../hooks/usePersistField';
+import { FieldInputClickOutsideEvent } from '@/object-record/record-field/meta-types/input/components/DateTimeFieldInput';
 
 type FieldInputEvent = (persist: () => void) => void;
 
 type DateFieldInputProps = {
-  onClickOutside?: FieldInputEvent;
+  onClickOutside?: FieldInputClickOutsideEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
   onClear?: FieldInputEvent;
@@ -50,10 +51,10 @@ export const DateFieldInput = ({
   };
 
   const handleClickOutside = (
-    _event: MouseEvent | TouchEvent,
+    event: MouseEvent | TouchEvent,
     newDate: Nullable<Date>,
   ) => {
-    onClickOutside?.(() => persistDate(newDate));
+    onClickOutside?.(() => persistDate(newDate), event);
   };
 
   const handleChange = (newDate: Nullable<Date>) => {

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

@@ -6,9 +6,13 @@ import { usePersistField } from '../../../hooks/usePersistField';
 import { useDateTimeField } from '../../hooks/useDateTimeField';
 
 export type FieldInputEvent = (persist: () => void) => void;
+export type FieldInputClickOutsideEvent = (
+  persist: () => void,
+  event: MouseEvent | TouchEvent,
+) => void;
 
 export type DateTimeFieldInputProps = {
-  onClickOutside?: FieldInputEvent;
+  onClickOutside?: FieldInputClickOutsideEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
   onClear?: FieldInputEvent;
@@ -45,10 +49,10 @@ export const DateTimeFieldInput = ({
   };
 
   const handleClickOutside = (
-    _event: MouseEvent | TouchEvent,
+    event: MouseEvent | TouchEvent,
     newDate: Nullable<Date>,
   ) => {
-    onClickOutside?.(() => persistDate(newDate));
+    onClickOutside?.(() => persistDate(newDate), event);
   };
 
   const handleChange = (newDate: Nullable<Date>) => {

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

@@ -8,9 +8,13 @@ import { MultiItemFieldInput } from './MultiItemFieldInput';
 
 type EmailsFieldInputProps = {
   onCancel?: () => void;
+  onClickOutside?: (event: MouseEvent | TouchEvent) => void;
 };
 
-export const EmailsFieldInput = ({ onCancel }: EmailsFieldInputProps) => {
+export const EmailsFieldInput = ({
+  onCancel,
+  onClickOutside,
+}: EmailsFieldInputProps) => {
   const { persistEmailsField, hotkeyScope, fieldValue } = useEmailsField();
 
   const emails = useMemo<string[]>(
@@ -45,6 +49,7 @@ export const EmailsFieldInput = ({ onCancel }: EmailsFieldInputProps) => {
       items={emails}
       onPersist={handlePersistEmails}
       onCancel={onCancel}
+      onClickOutside={onClickOutside}
       placeholder="Email"
       fieldMetadataType={FieldMetadataType.Emails}
       validateInput={validateInput}

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

@@ -4,7 +4,10 @@ import { DoubleTextInput } from '@/ui/field/input/components/DoubleTextInput';
 import { FieldInputOverlay } from '@/ui/field/input/components/FieldInputOverlay';
 
 import { isDoubleTextFieldEmpty } from '@/object-record/record-field/meta-types/input/utils/isDoubleTextFieldEmpty';
-import { FieldInputEvent } from './DateTimeFieldInput';
+import {
+  FieldInputClickOutsideEvent,
+  FieldInputEvent,
+} from './DateTimeFieldInput';
 
 const FIRST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS =
   'F‌‌irst name';
@@ -13,7 +16,7 @@ const LAST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS =
   'L‌‌ast name';
 
 type FullNameFieldInputProps = {
-  onClickOutside?: FieldInputEvent;
+  onClickOutside?: FieldInputClickOutsideEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
   onTab?: FieldInputEvent;
@@ -57,8 +60,9 @@ export const FullNameFieldInput = ({
     event: MouseEvent | TouchEvent,
     newDoubleText: FieldDoubleText,
   ) => {
-    onClickOutside?.(() =>
+    onClickOutside?.(
-      persistFullNameField(convertToFullName(newDoubleText)),
+      () => persistFullNameField(convertToFullName(newDoubleText)),
+      event,
     );
   };
 

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

@@ -8,9 +8,13 @@ import { MultiItemFieldInput } from './MultiItemFieldInput';
 
 type LinksFieldInputProps = {
   onCancel?: () => void;
+  onClickOutside?: (event: MouseEvent | TouchEvent) => void;
 };
 
-export const LinksFieldInput = ({ onCancel }: LinksFieldInputProps) => {
+export const LinksFieldInput = ({
+  onCancel,
+  onClickOutside,
+}: LinksFieldInputProps) => {
   const { persistLinksField, hotkeyScope, fieldValue } = useLinksField();
 
   const links = useMemo<{ url: string; label: string }[]>(
@@ -49,6 +53,7 @@ export const LinksFieldInput = ({ onCancel }: LinksFieldInputProps) => {
       items={links}
       onPersist={handlePersistLinks}
       onCancel={onCancel}
+      onClickOutside={onClickOutside}
       placeholder="URL"
       fieldMetadataType={FieldMetadataType.Links}
       validateInput={(input) => ({

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

@@ -41,6 +41,7 @@ type MultiItemFieldInputProps<T> = {
   newItemLabel?: string;
   fieldMetadataType: FieldMetadataType;
   renderInput?: DropdownMenuInputProps['renderInput'];
+  onClickOutside?: (event: MouseEvent | TouchEvent) => void;
 };
 
 // Todo: the API of this component does not look healthy: we have renderInput, renderItem, formatInput, ...
@@ -57,24 +58,19 @@ export const MultiItemFieldInput = <T,>({
   newItemLabel,
   fieldMetadataType,
   renderInput,
+  onClickOutside,
 }: MultiItemFieldInputProps<T>) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const handleDropdownClose = () => {
     onCancel?.();
   };
 
-  const handleDropdownCloseOutside = (event: MouseEvent | TouchEvent) => {
-    event.stopImmediatePropagation();
-    if (inputValue?.trim().length > 0) {
-      handleSubmitInput();
-    } else {
-      onCancel?.();
-    }
-  };
-
   useListenClickOutside({
     refs: [containerRef],
-    callback: handleDropdownCloseOutside,
+    callback: (event) => {
+      onClickOutside?.(event);
+    },
+    listenerId: hotkeyScope,
   });
 
   useScopedHotkeys(Key.Escape, handleDropdownClose, hotkeyScope);

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

@@ -1,7 +1,7 @@
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItemWithOptionDropdown } from '@/ui/navigation/menu-item/components/MenuItemWithOptionDropdown';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import {
   IconBookmark,
   IconBookmarkPlus,
@@ -37,23 +37,29 @@ export const MultiItemFieldMenuItem = <T,>({
   const handleMouseEnter = () => setIsHovered(true);
   const handleMouseLeave = () => {
     setIsHovered(false);
-    if (isDropdownOpen) {
-      closeDropdown();
-    }
   };
 
-  const handleDeleteClick = () => {
+  const handleDeleteClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+    event.preventDefault();
+
     closeDropdown();
     setIsHovered(false);
     onDelete?.();
   };
 
-  const handleSetAsPrimaryClick = () => {
+  const handleSetAsPrimaryClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+    event.preventDefault();
+
     closeDropdown();
     onSetAsPrimary?.();
   };
 
-  const handleEditClick = () => {
+  const handleEditClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+    event.preventDefault();
+
     closeDropdown();
     onEdit?.();
   };

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

@@ -88,6 +88,7 @@ export const MultiSelectFieldInput = ({
       }
       resetSelectedItem();
     },
+    listenerId: 'MultiSelectFieldInput',
   });
 
   const optionIds = filteredOptionsInDropDown.map((option) => option.value);

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

@@ -2,11 +2,12 @@ import { TextInput } from '@/ui/field/input/components/TextInput';
 
 import { FieldInputOverlay } from '../../../../../ui/field/input/components/FieldInputOverlay';
 import { useNumberField } from '../../hooks/useNumberField';
+import { FieldInputClickOutsideEvent } from '@/object-record/record-field/meta-types/input/components/DateTimeFieldInput';
 
 export type FieldInputEvent = (persist: () => void) => void;
 
 export type NumberFieldInputProps = {
-  onClickOutside?: FieldInputEvent;
+  onClickOutside?: FieldInputClickOutsideEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
   onTab?: FieldInputEvent;
@@ -40,7 +41,7 @@ export const NumberFieldInput = ({
     event: MouseEvent | TouchEvent,
     newText: string,
   ) => {
-    onClickOutside?.(() => persistNumberField(newText));
+    onClickOutside?.(() => persistNumberField(newText), event);
   };
 
   const handleTab = (newText: string) => {

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

@@ -49,10 +49,14 @@ const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
 
 type PhonesFieldInputProps = {
   onCancel?: () => void;
+  onClickOutside?: (event: MouseEvent | TouchEvent) => void;
 };
 
-export const PhonesFieldInput = ({ onCancel }: PhonesFieldInputProps) => {
+export const PhonesFieldInput = ({
-  const { persistPhonesField, hotkeyScope, fieldDefinition, fieldValue } =
+  onCancel,
+  onClickOutside,
+}: PhonesFieldInputProps) => {
+  const { persistPhonesField, hotkeyScope, fieldValue, fieldDefinition } =
     usePhonesField();
 
   const phones = createPhonesFromFieldValue(fieldValue);
@@ -83,6 +87,7 @@ export const PhonesFieldInput = ({ onCancel }: PhonesFieldInputProps) => {
     <MultiItemFieldInput
       items={phones}
       onPersist={handlePersistPhones}
+      onClickOutside={onClickOutside}
       onCancel={onCancel}
       placeholder="Phone"
       fieldMetadataType={FieldMetadataType.Phones}

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

@@ -3,10 +3,13 @@ import { TextAreaInput } from '@/ui/field/input/components/TextAreaInput';
 
 import { useJsonField } from '../../hooks/useJsonField';
 
-import { FieldInputEvent } from './DateTimeFieldInput';
+import {
+  FieldInputClickOutsideEvent,
+  FieldInputEvent,
+} from './DateTimeFieldInput';
 
 type RawJsonFieldInputProps = {
-  onClickOutside?: FieldInputEvent;
+  onClickOutside?: FieldInputClickOutsideEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
   onTab?: FieldInputEvent;
@@ -37,10 +40,10 @@ export const RawJsonFieldInput = ({
   };
 
   const handleClickOutside = (
-    _event: MouseEvent | TouchEvent,
+    event: MouseEvent | TouchEvent,
     newText: string,
   ) => {
-    onClickOutside?.(() => persistJsonField(newText));
+    onClickOutside?.(() => persistJsonField(newText), event);
   };
 
   const handleTab = (newText: string) => {

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

@@ -21,8 +21,6 @@ export const SelectFieldInput = ({
 }: SelectFieldInputProps) => {
   const { persistField, fieldDefinition, fieldValue, hotkeyScope } =
     useSelectField();
-  const [selectWrapperRef, setSelectWrapperRef] =
-    useState<HTMLDivElement | null>(null);
 
   const [filteredOptions, setFilteredOptions] = useState<SelectOption[]>([]);
 
@@ -62,7 +60,7 @@ export const SelectFieldInput = ({
   ];
 
   return (
-    <div ref={setSelectWrapperRef}>
+    <div>
       <SelectInput
         selectableListId={SINGLE_RECORD_SELECT_BASE_LIST}
         selectableItemIdArray={optionIds}
@@ -76,7 +74,6 @@ export const SelectFieldInput = ({
             resetSelectedItem();
           }
         }}
-        selectWrapperRef={selectWrapperRef}
         onOptionSelected={handleSubmit}
         options={fieldDefinition.metadata.options}
         onCancel={onCancel}

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

@@ -5,10 +5,13 @@ import { usePersistField } from '../../../hooks/usePersistField';
 import { useTextField } from '../../hooks/useTextField';
 
 import { turnIntoUndefinedIfWhitespacesOnly } from '~/utils/string/turnIntoUndefinedIfWhitespacesOnly';
-import { FieldInputEvent } from './DateTimeFieldInput';
+import {
+  FieldInputClickOutsideEvent,
+  FieldInputEvent,
+} from './DateTimeFieldInput';
 
 export type TextFieldInputProps = {
-  onClickOutside?: FieldInputEvent;
+  onClickOutside?: FieldInputClickOutsideEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
   onTab?: FieldInputEvent;
@@ -38,7 +41,7 @@ export const TextFieldInput = ({
     event: MouseEvent | TouchEvent,
     newText: string,
   ) => {
-    onClickOutside?.(() => persistField(newText.trim()));
+    onClickOutside?.(() => persistField(newText.trim()), event);
   };
 
   const handleTab = (newText: string) => {

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

@@ -1,12 +1,5 @@
 import { Decorator, Meta, StoryObj } from '@storybook/react';
-import {
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
-  expect,
-  fireEvent,
-  fn,
-  userEvent,
-  waitFor,
-  within,
-} from '@storybook/test';
 import { useEffect } from 'react';
 import { useSetRecoilState } from 'recoil';
 
@@ -26,6 +19,7 @@ import {
 
 import { FieldContextProvider } from '@/object-record/record-field/meta-types/components/FieldContextProvider';
 import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
+import { getCanvasElementForDropdownTesting } from 'twenty-ui';
 import {
   RelationToOneFieldInput,
   RelationToOneFieldInputProps,
@@ -136,8 +130,8 @@ export const Default: Story = {
 
 export const Submit: Story = {
   decorators: [ComponentWithRecoilScopeDecorator],
-  play: async ({ canvasElement }) => {
+  play: async () => {
-    const canvas = within(canvasElement);
+    const canvas = within(getCanvasElementForDropdownTesting());
 
     expect(submitJestFn).toHaveBeenCalledTimes(0);
 
@@ -154,16 +148,16 @@ export const Submit: Story = {
 
 export const Cancel: Story = {
   decorators: [ComponentWithRecoilScopeDecorator],
-  play: async ({ canvasElement }) => {
+  play: async () => {
-    const canvas = within(canvasElement);
+    const canvas = within(getCanvasElementForDropdownTesting());
 
     expect(cancelJestFn).toHaveBeenCalledTimes(0);
     await canvas.findByText('John Wick', undefined, { timeout: 3000 });
 
     const emptyDiv = canvas.getByTestId('data-field-input-click-outside-div');
-    fireEvent.click(emptyDiv);
 
     await waitFor(() => {
+      userEvent.click(emptyDiv);
       expect(cancelJestFn).toHaveBeenCalledTimes(1);
     });
   },

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents.ts

@@ -28,10 +28,10 @@ export const useRegisterInputEvents = <T>({
   useListenClickOutside({
     refs: [inputRef, copyRef].filter(isDefined),
     callback: (event) => {
-      event.stopImmediatePropagation();
       onClickOutside?.(event, inputValue);
     },
     enabled: isDefined(onClickOutside),
+    listenerId: hotkeyScope,
   });
 
   useScopedHotkeys(

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

@@ -14,7 +14,11 @@ import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types
 import { useInlineCell } from '../hooks/useInlineCell';
 
 import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly';
+import { FieldInputClickOutsideEvent } from '@/object-record/record-field/meta-types/input/components/DateTimeFieldInput';
+import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
 import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
+import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
+import { useRecoilCallback } from 'recoil';
 import { RecordInlineCellContainer } from './RecordInlineCellContainer';
 import {
   RecordInlineCellContext,
@@ -65,10 +69,30 @@ export const RecordInlineCell = ({ loading }: RecordInlineCellProps) => {
     closeInlineCell();
   };
 
-  const handleClickOutside: FieldInputEvent = (persistField) => {
+  const handleClickOutside: FieldInputClickOutsideEvent = useRecoilCallback(
-    persistField();
+    ({ snapshot }) =>
-    closeInlineCell();
+      (persistField, event) => {
-  };
+        const recordFieldDropdownId = getDropdownFocusIdForRecordField(
+          recordId,
+          fieldDefinition.fieldMetadataId,
+          'inline-cell',
+        );
+
+        const activeDropdownFocusId = snapshot
+          .getLoadable(activeDropdownFocusIdState)
+          .getValue();
+
+        if (recordFieldDropdownId !== activeDropdownFocusId) {
+          return;
+        }
+
+        event.stopImmediatePropagation();
+
+        persistField();
+        closeInlineCell();
+      },
+    [closeInlineCell, fieldDefinition.fieldMetadataId, recordId],
+  );
 
   const { getIcon } = useIcons();
 

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

@@ -18,11 +18,10 @@ const StyledInlineCellInput = styled.div`
   display: flex;
 
   min-height: 32px;
-  min-width: 240px;
 
-  width: inherit;
+  width: 240px;
 
-  z-index: 1000;
+  z-index: 30;
 `;
 
 type RecordInlineCellEditModeProps = {

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

@@ -7,6 +7,9 @@ import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { isDefined } from '~/utils/isDefined';
 
 import { useInitDraftValueV2 } from '@/object-record/record-field/hooks/useInitDraftValueV2';
+import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
+import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
+import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
 import { isInlineCellInEditModeScopedState } from '../states/isInlineCellInEditModeScopedState';
 import { InlineCellHotkeyScope } from '../types/InlineCellHotkeyScope';
 
@@ -21,6 +24,11 @@ export const useInlineCell = () => {
     isInlineCellInEditModeScopedState(recoilScopeId),
   );
 
+  const { setActiveDropdownFocusIdAndMemorizePrevious } =
+    useSetActiveDropdownFocusIdAndMemorizePrevious();
+  const { goBackToPreviousDropdownFocusId } =
+    useGoBackToPreviousDropdownFocusId();
+
   const {
     setHotkeyScopeAndMemorizePreviousScope,
     goBackToPreviousHotkeyScope,
@@ -32,6 +40,8 @@ export const useInlineCell = () => {
     setIsInlineCellInEditMode(false);
 
     goBackToPreviousHotkeyScope();
+
+    goBackToPreviousDropdownFocusId();
   };
 
   const openInlineCell = (customEditHotkeyScopeForField?: HotkeyScope) => {
@@ -46,6 +56,14 @@ export const useInlineCell = () => {
     } else {
       setHotkeyScopeAndMemorizePreviousScope(InlineCellHotkeyScope.InlineCell);
     }
+
+    setActiveDropdownFocusIdAndMemorizePrevious(
+      getDropdownFocusIdForRecordField(
+        recordId,
+        fieldDefinition.fieldMetadataId,
+        'inline-cell',
+      ),
+    );
   };
 
   return {

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode.ts

@@ -2,6 +2,7 @@ import { useRecoilCallback } from 'recoil';
 
 import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
 import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
+import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 
@@ -16,6 +17,9 @@ export const useCloseCurrentTableCellInEditMode = (recordTableId?: string) => {
     recordTableId,
   );
 
+  const { goBackToPreviousDropdownFocusId } =
+    useGoBackToPreviousDropdownFocusId();
+
   return useRecoilCallback(
     ({ set, snapshot }) => {
       return async () => {
@@ -28,8 +32,14 @@ export const useCloseCurrentTableCellInEditMode = (recordTableId?: string) => {
           isTableCellInEditModeFamilyState(currentTableCellInEditModePosition),
           false,
         );
+
+        goBackToPreviousDropdownFocusId();
       };
     },
-    [currentTableCellInEditModePositionState, isTableCellInEditModeFamilyState],
+    [
+      currentTableCellInEditModePositionState,
+      isTableCellInEditModeFamilyState,
+      goBackToPreviousDropdownFocusId,
+    ],
   );
 };

packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyUnselectEffect.tsx

@@ -5,7 +5,7 @@ import { useLeaveTableFocus } from '@/object-record/record-table/hooks/internal/
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { useListenClickOutsideV2 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
 type RecordTableBodyUnselectEffectProps = {
   tableBodyRef: React.RefObject<HTMLDivElement>;
@@ -32,7 +32,7 @@ export const RecordTableBodyUnselectEffect = ({
     TableHotkeyScope.Table,
   );
 
-  useListenClickOutsideV2({
+  useListenClickOutside({
     excludeClassNames: [
       'bottom-bar',
       'action-menu-dropdown',

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldInput.tsx

@@ -4,19 +4,13 @@ import { FieldInput } from '@/object-record/record-field/components/FieldInput';
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly';
 import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
-import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
+import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
 import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
-import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
+import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
-import { useSetRecoilState } from 'recoil';
+import { useRecoilCallback } from 'recoil';
 
 export const RecordTableCellFieldInput = () => {
-  const { getClickOutsideListenerIsActivatedState } =
-    useClickOustideListenerStates(RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID);
-  const setClickOutsideListenerIsActivated = useSetRecoilState(
-    getClickOutsideListenerIsActivatedState,
-  );
-
   const { onUpsertRecord, onMoveFocus, onCloseTableCell } =
     useContext(RecordTableContext);
 
@@ -48,17 +42,35 @@ export const RecordTableCellFieldInput = () => {
     onCloseTableCell();
   };
 
-  const handleClickOutside: FieldInputEvent = (persistField) => {
+  const handleClickOutside = useRecoilCallback(
-    setClickOutsideListenerIsActivated(false);
+    ({ snapshot }) =>
+      (persistField: () => void, event: MouseEvent | TouchEvent) => {
+        const dropdownFocusId = getDropdownFocusIdForRecordField(
+          recordId,
+          fieldDefinition.fieldMetadataId,
+          'table-cell',
+        );
 
-    onUpsertRecord({
+        const activeDropdownFocusId = snapshot
-      persistField,
+          .getLoadable(activeDropdownFocusIdState)
-      recordId,
+          .getValue();
-      fieldName: fieldDefinition.metadata.fieldName,
-    });
 
-    onCloseTableCell();
+        if (activeDropdownFocusId !== dropdownFocusId) {
-  };
+          return;
+        }
+
+        event.stopImmediatePropagation();
+
+        onUpsertRecord({
+          persistField,
+          recordId,
+          fieldName: fieldDefinition.metadata.fieldName,
+        });
+
+        onCloseTableCell();
+      },
+    [fieldDefinition, onCloseTableCell, onUpsertRecord, recordId],
+  );
 
   const handleEscape: FieldInputEvent = (persistField) => {
     onUpsertRecord({

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx

@@ -10,13 +10,11 @@ import { useIsFieldEmpty } from '@/object-record/record-field/hooks/useIsFieldEm
 import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFieldInputOnly';
 import { useToggleEditOnlyInput } from '@/object-record/record-field/hooks/useToggleEditOnlyInput';
 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
-import { useCloseCurrentTableCellInEditMode } from '@/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode';
 import { RecordTableCellButton } from '@/object-record/record-table/record-table-cell/components/RecordTableCellButton';
 import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell';
 import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey';
-import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from '~/utils/isDefined';
 
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
@@ -34,7 +32,6 @@ export const RecordTableCellSoftFocusMode = ({
   nonEditModeContent,
 }: RecordTableCellSoftFocusModeProps) => {
   const { columnIndex } = useContext(RecordTableCellContext);
-  const closeCurrentTableCell = useCloseCurrentTableCellInEditMode();
 
   const isFieldReadOnly = useIsFieldValueReadOnly();
 
@@ -135,13 +132,6 @@ export const RecordTableCellSoftFocusMode = ({
     */
   };
 
-  useListenClickOutside({
-    refs: [scrollRef],
-    callback: () => {
-      closeCurrentTableCell();
-    },
-  });
-
   const isFirstColumn = columnIndex === 0;
   const customButtonIcon = useGetButtonIcon();
   const buttonIcon = isFirstColumn

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts

@@ -22,6 +22,8 @@ import { isDefined } from '~/utils/isDefined';
 
 import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
 import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
+import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
+import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
 import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
 import { useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -69,6 +71,9 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
 
   const navigate = useNavigate();
 
+  const { setActiveDropdownFocusIdAndMemorizePrevious } =
+    useSetActiveDropdownFocusIdAndMemorizePrevious();
+
   const openTableCell = useRecoilCallback(
     ({ snapshot, set }) =>
       ({
@@ -142,6 +147,14 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
             DEFAULT_CELL_SCOPE.customScopes,
           );
         }
+
+        setActiveDropdownFocusIdAndMemorizePrevious(
+          getDropdownFocusIdForRecordField(
+            recordId,
+            fieldDefinition.fieldMetadataId,
+            'table-cell',
+          ),
+        );
       },
     [
       getClickOutsideListenerIsActivatedState,
@@ -156,6 +169,7 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
       setViewableRecordNameSingular,
       openRightDrawer,
       setHotkeyScope,
+      setActiveDropdownFocusIdAndMemorizePrevious,
     ],
   );
 

packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx

@@ -15,7 +15,6 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { onToggleColumnFilterComponentState } from '@/object-record/record-table/states/onToggleColumnFilterComponentState';
 import { onToggleColumnSortComponentState } from '@/object-record/record-table/states/onToggleColumnSortComponentState';
 import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
-import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useTableColumns } from '../../hooks/useTableColumns';
 import { ColumnDefinition } from '../../types/ColumnDefinition';
@@ -92,45 +91,43 @@ export const RecordTableColumnHeadDropdownMenu = ({
   const canHide = column.isLabelIdentifier !== true;
 
   return (
-    <ScrollWrapper contextProviderName="dropdownMenuItemsContainer">
+    <DropdownMenuItemsContainer>
-      <DropdownMenuItemsContainer>
+      {isFilterable && (
-        {isFilterable && (
+        <MenuItem
-          <MenuItem
+          LeftIcon={IconFilter}
-            LeftIcon={IconFilter}
+          onClick={handleFilterClick}
-            onClick={handleFilterClick}
+          text="Filter"
-            text="Filter"
+        />
-          />
+      )}
-        )}
+      {isSortable && (
-        {isSortable && (
+        <MenuItem
-          <MenuItem
+          LeftIcon={IconSortDescending}
-            LeftIcon={IconSortDescending}
+          onClick={handleSortClick}
-            onClick={handleSortClick}
+          text="Sort"
-            text="Sort"
+        />
-          />
+      )}
-        )}
+      {showSeparator && <DropdownMenuSeparator />}
-        {showSeparator && <DropdownMenuSeparator />}
+      {canMoveLeft && (
-        {canMoveLeft && (
+        <MenuItem
-          <MenuItem
+          LeftIcon={IconArrowLeft}
-            LeftIcon={IconArrowLeft}
+          onClick={handleColumnMoveLeft}
-            onClick={handleColumnMoveLeft}
+          text="Move left"
-            text="Move left"
+        />
-          />
+      )}
-        )}
+      {canMoveRight && (
-        {canMoveRight && (
+        <MenuItem
-          <MenuItem
+          LeftIcon={IconArrowRight}
-            LeftIcon={IconArrowRight}
+          onClick={handleColumnMoveRight}
-            onClick={handleColumnMoveRight}
+          text="Move right"
-            text="Move right"
+        />
-          />
+      )}
-        )}
+      {canHide && (
-        {canHide && (
+        <MenuItem
-          <MenuItem
+          LeftIcon={IconEyeOff}
-            LeftIcon={IconEyeOff}
+          onClick={handleColumnVisibility}
-            onClick={handleColumnVisibility}
+          text="Hide"
-            text="Hide"
+        />
-          />
+      )}
-        )}
+    </DropdownMenuItemsContainer>
-      </DropdownMenuItemsContainer>
-    </ScrollWrapper>
   );
 };

packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx

@@ -13,7 +13,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
-import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 export const RecordTableHeaderPlusButtonContent = () => {
@@ -42,20 +41,18 @@ export const RecordTableHeaderPlusButtonContent = () => {
 
   return (
     <>
-      <ScrollWrapper contextProviderName="dropdownMenuItemsContainer">
-        <DropdownMenuItemsContainer>
-          {hiddenTableColumns.map((column) => (
-            <MenuItem
-              key={column.fieldMetadataId}
-              onClick={() => handleAddColumn(column)}
-              LeftIcon={getIcon(column.iconName)}
-              text={column.label}
-            />
-          ))}
-        </DropdownMenuItemsContainer>
-      </ScrollWrapper>
-      <DropdownMenuSeparator />
       <DropdownMenuItemsContainer>
+        {hiddenTableColumns.map((column) => (
+          <MenuItem
+            key={column.fieldMetadataId}
+            onClick={() => handleAddColumn(column)}
+            LeftIcon={getIcon(column.iconName)}
+            text={column.label}
+          />
+        ))}
+      </DropdownMenuItemsContainer>
+      <DropdownMenuSeparator />
+      <DropdownMenuItemsContainer withoutScrollWrapper>
         <UndecoratedLink
           fullWidth
           to={`/settings/objects/${getObjectSlug(objectMetadataItem)}`}

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

@@ -179,7 +179,11 @@ export const MultiRecordSelect = ({
             {objectRecordsIdsMultiSelect?.length > 0 && (
               <DropdownMenuSeparator />
             )}
-            {isDefined(onCreate) && <div>{createNewButton}</div>}
+            {isDefined(onCreate) && (
+              <DropdownMenuItemsContainer withoutScrollWrapper>
+                {createNewButton}
+              </DropdownMenuItemsContainer>
+            )}
           </>
         )}
       </DropdownMenu>

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

@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import { MULTI_OBJECT_RECORD_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/relation-picker/constants/MultiObjectRecordClickOutsideListenerId';
 import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
 import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
 export const MultipleObjectRecordOnClickOutsideEffect = ({
   containerRef,
@@ -11,10 +12,6 @@ export const MultipleObjectRecordOnClickOutsideEffect = ({
   containerRef: React.RefObject<HTMLDivElement>;
   onClickOutside: () => void;
 }) => {
-  const { useListenClickOutside } = useClickOutsideListener(
-    MULTI_OBJECT_RECORD_CLICK_OUTSIDE_LISTENER_ID,
-  );
-
   const { toggleClickOutsideListener: toggleRightDrawerClickOustideListener } =
     useClickOutsideListener(RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID);
 
@@ -35,6 +32,7 @@ export const MultipleObjectRecordOnClickOutsideEffect = ({
 
       onClickOutside();
     },
+    listenerId: MULTI_OBJECT_RECORD_CLICK_OUTSIDE_LISTENER_ID,
   });
 
   return <></>;

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

@@ -41,6 +41,7 @@ export const SingleRecordSelect = ({
         onCancel();
       }
     },
+    listenerId: 'single-record-select',
   });
 
   return (

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

@@ -59,27 +59,6 @@ export const SingleRecordSelectMenuItemsWithSearch = ({
     />
   );
 
-  const results = (
-    <SingleRecordSelectMenuItems
-      recordsToSelect={records.recordsToSelect}
-      loading={records.loading}
-      selectedRecord={
-        records.recordsToSelect.length === 1
-          ? records.recordsToSelect[0]
-          : undefined
-      }
-      shouldSelectEmptyOption={selectedRecordIds?.length === 0}
-      hotkeyScope={recordPickerInstanceId}
-      isFiltered={!!recordPickerSearchFilter}
-      {...{
-        EmptyIcon,
-        emptyLabel,
-        onCancel,
-        onRecordSelected,
-      }}
-    />
-  );
-
   return (
     <>
       {dropdownPlacement?.includes('end') && (
@@ -88,7 +67,26 @@ export const SingleRecordSelectMenuItemsWithSearch = ({
             {createNewButton}
           </DropdownMenuItemsContainer>
           {records.recordsToSelect.length > 0 && <DropdownMenuSeparator />}
-          {records.recordsToSelect.length > 0 && results}
+          {records.recordsToSelect.length > 0 && (
+            <SingleRecordSelectMenuItems
+              recordsToSelect={records.recordsToSelect}
+              loading={records.loading}
+              selectedRecord={
+                records.recordsToSelect.length === 1
+                  ? records.recordsToSelect[0]
+                  : undefined
+              }
+              shouldSelectEmptyOption={selectedRecordIds?.length === 0}
+              hotkeyScope={recordPickerInstanceId}
+              isFiltered={!!recordPickerSearchFilter}
+              {...{
+                EmptyIcon,
+                emptyLabel,
+                onCancel,
+                onRecordSelected,
+              }}
+            />
+          )}
           <DropdownMenuSeparator />
         </>
       )}
@@ -97,7 +95,26 @@ export const SingleRecordSelectMenuItemsWithSearch = ({
         isUndefinedOrNull(dropdownPlacement)) && (
         <>
           <DropdownMenuSeparator />
-          {records.recordsToSelect.length > 0 && results}
+          {records.recordsToSelect.length > 0 && (
+            <SingleRecordSelectMenuItems
+              recordsToSelect={records.recordsToSelect}
+              loading={records.loading}
+              selectedRecord={
+                records.recordsToSelect.length === 1
+                  ? records.recordsToSelect[0]
+                  : undefined
+              }
+              shouldSelectEmptyOption={selectedRecordIds?.length === 0}
+              hotkeyScope={recordPickerInstanceId}
+              isFiltered={!!recordPickerSearchFilter}
+              {...{
+                EmptyIcon,
+                emptyLabel,
+                onCancel,
+                onRecordSelected,
+              }}
+            />
+          )}
           {records.recordsToSelect.length > 0 && isDefined(onCreate) && (
             <DropdownMenuSeparator />
           )}

packages/twenty-front/src/modules/object-record/utils/getDropdownFocusIdForRecordField.ts

@@ -0,0 +1,7 @@
+export const getDropdownFocusIdForRecordField = (
+  recordId: string,
+  fieldMetadataId: string,
+  componentType: 'table-cell' | 'inline-cell',
+) => {
+  return `dropdown-${componentType}-record-${recordId}-field-${fieldMetadataId}`;
+};

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx

@@ -19,12 +19,10 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 
 type SettingsAccountsRowDropdownMenuProps = {
   account: ConnectedAccount;
-  className?: string;
 };
 
 export const SettingsAccountsRowDropdownMenu = ({
   account,
-  className,
 }: SettingsAccountsRowDropdownMenuProps) => {
   const dropdownId = `settings-account-row-${account.id}`;
 
@@ -39,7 +37,6 @@ export const SettingsAccountsRowDropdownMenu = ({
   return (
     <Dropdown
       dropdownId={dropdownId}
-      className={className}
       dropdownPlacement="right-start"
       dropdownHotkeyScope={{ scope: dropdownId }}
       clickableComponent={

packages/twenty-front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx

@@ -101,6 +101,7 @@ export const MatchColumnSelect = ({
     callback: () => {
       setIsOpen(false);
     },
+    listenerId: 'match-column-select',
   });
 
   useUpdateEffect(() => {

packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelect.tsx

@@ -75,8 +75,6 @@ export const SubMatchingSelect = <T extends string>({
   const options = getFieldOptions(fields, column.value) as SelectOption[];
   const value = options.find((opt) => opt.value === option.value);
   const [isOpen, setIsOpen] = useState(false);
-  const [selectWrapperRef, setSelectWrapperRef] =
-    useState<HTMLDivElement | null>(null);
 
   const theme = useTheme();
 
@@ -106,17 +104,14 @@ export const SubMatchingSelect = <T extends string>({
         cursor="pointer"
         onClick={() => setIsOpen(!isOpen)}
         id="control"
-        ref={setSelectWrapperRef}
       >
         <Tag
           text={value?.label ?? placeholder}
           color={value?.color as TagColor}
         />
         <StyledIconChevronDown size={theme.icon.size.md} />
-
         {isOpen && (
           <SelectInput
-            parentRef={selectWrapperRef}
             defaultOption={value}
             options={options}
             onOptionSelected={handleSelect}

packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx

@@ -8,10 +8,11 @@ import { CountrySelect } from '@/ui/input/components/internal/country/components
 import { SELECT_COUNTRY_DROPDOWN_ID } from '@/ui/input/components/internal/country/constants/SelectCountryDropdownId';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
-import { MOBILE_VIEWPORT } from 'twenty-ui';
+import { useRecoilValue } from 'recoil';
-import { isDefined } from '~/utils/isDefined';
+import { isDefined, MOBILE_VIEWPORT } from 'twenty-ui';
 
 const StyledAddressContainer = styled.div`
   background: ${({ theme }) => theme.background.secondary};
@@ -190,18 +191,22 @@ export const AddressInput = ({
     [onEscape, internalValue],
   );
 
-  const { useListenClickOutside } = useClickOutsideListener('addressInput');
+  const activeDropdownFocusId = useRecoilValue(activeDropdownFocusIdState);
 
   useListenClickOutside({
     refs: [wrapperRef],
     callback: (event) => {
+      if (activeDropdownFocusId === SELECT_COUNTRY_DROPDOWN_ID) {
+        return;
+      }
+
       event.stopImmediatePropagation();
 
       closeCountryDropdown();
-
       onClickOutside?.(event, internalValue);
     },
     enabled: isDefined(onClickOutside),
+    listenerId: 'address-input',
   });
 
   useEffect(() => {

packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx

@@ -9,7 +9,7 @@ import {
   MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
 } from '@/ui/input/components/internal/date/components/InternalDatePicker';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { useListenClickOutsideV2 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
 const StyledCalendarContainer = styled.div`
   background: ${({ theme }) => theme.background.transparent.secondary};
@@ -72,7 +72,7 @@ export const DateInput = ({
     MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
   );
 
-  useListenClickOutsideV2({
+  useListenClickOutside({
     refs: [wrapperRef],
     listenerId: 'DateInput',
     callback: (event) => {

packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx

@@ -10,9 +10,9 @@ import { Key } from 'ts-key-enum';
 
 import { FieldDoubleText } from '@/object-record/record-field/types/FieldDoubleText';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from '~/utils/isDefined';
 
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { splitFullName } from '~/utils/format/spiltFullName';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 import { StyledTextInput } from './TextInput';
@@ -158,6 +158,7 @@ export const DoubleTextInput = ({
       });
     },
     enabled: isDefined(onClickOutside),
+    listenerId: 'double-text-input',
   });
 
   const handleOnPaste = (event: ClipboardEvent<HTMLInputElement>) => {

packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx

@@ -2,13 +2,13 @@ import styled from '@emotion/styled';
 import { OVERLAY_BACKGROUND } from 'twenty-ui';
 
 const StyledFieldTextAreaOverlay = styled.div`
+  align-items: center;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  display: flex;
+  margin: -1px;
+  max-height: 420px;
   position: absolute;
   top: 0;
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  align-items: center;
-  display: flex;
-  max-height: 420px;
-  margin: -1px;
   width: 100%;
   ${OVERLAY_BACKGROUND}
 `;

packages/twenty-front/src/modules/ui/field/input/components/SelectInput.tsx

@@ -1,14 +1,12 @@
 import { SelectOption } from '@/spreadsheet-import/types';
 import { SelectInput as SelectBaseInput } from '@/ui/input/components/SelectInput';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
-import { ReferenceType } from '@floating-ui/react';
 
 type SelectInputProps = {
   selectableListId: string;
   selectableItemIdArray: string[];
   hotkeyScope: string;
   onEnter: (itemId: string) => void;
-  selectWrapperRef?: ReferenceType | null | undefined;
   onOptionSelected: (selectedOption: SelectOption) => void;
   options: SelectOption[];
   onCancel?: () => void;
@@ -23,7 +21,6 @@ export const SelectInput = ({
   selectableItemIdArray,
   hotkeyScope,
   onEnter,
-  selectWrapperRef,
   onOptionSelected,
   options,
   onCancel,
@@ -40,7 +37,6 @@ export const SelectInput = ({
       onEnter={onEnter}
     >
       <SelectBaseInput
-        parentRef={selectWrapperRef}
         onOptionSelected={onOptionSelected}
         options={options}
         onCancel={onCancel}

packages/twenty-front/src/modules/ui/input/components/Select.tsx

@@ -168,7 +168,7 @@ export const Select = <Value extends SelectValue>({
                 <DropdownMenuSeparator />
               )}
               {!!callToActionButton && (
-                <DropdownMenuItemsContainer hasMaxHeight>
+                <DropdownMenuItemsContainer hasMaxHeight withoutScrollWrapper>
                   <MenuItem
                     onClick={callToActionButton.onClick}
                     LeftIcon={callToActionButton.Icon}

packages/twenty-front/src/modules/ui/input/components/SelectInput.tsx

@@ -1,5 +1,3 @@
-import styled from '@emotion/styled';
-
 import { SelectOption } from '@/spreadsheet-import/types';
 
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
@@ -8,32 +6,15 @@ import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/Dropdow
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
-import { useTheme } from '@emotion/react';
-import {
-  ReferenceType,
-  autoUpdate,
-  flip,
-  offset,
-  size,
-  useFloating,
-} from '@floating-ui/react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Key } from 'ts-key-enum';
 import { MenuItemSelectTag, TagColor, isDefined } from 'twenty-ui';
 
-const StyledRelationPickerContainer = styled.div`
-  left: -1px;
-  position: absolute;
-  top: -1px;
-  z-index: ${({ theme }) => theme.lastLayerZIndex};
-`;
-
 interface SelectInputProps {
   onOptionSelected: (selectedOption: SelectOption) => void;
   options: SelectOption[];
   onCancel?: () => void;
   defaultOption?: SelectOption;
-  parentRef?: ReferenceType | null | undefined;
   onFilterChange?: (filteredOptions: SelectOption[]) => void;
   onClear?: () => void;
   clearLabel?: string;
@@ -47,13 +28,11 @@ export const SelectInput = ({
   options,
   onCancel,
   defaultOption,
-  parentRef,
   onFilterChange,
   hotkeyScope,
 }: SelectInputProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const theme = useTheme();
   const [searchFilter, setSearchFilter] = useState('');
   const [selectedOption, setSelectedOption] = useState<
     SelectOption | undefined
@@ -81,27 +60,12 @@ export const SelectInput = ({
     onOptionSelected(option);
   };
 
-  const { refs, floatingStyles } = useFloating({
-    elements: { reference: parentRef },
-    strategy: 'absolute',
-    middleware: [
-      offset(() => {
-        return parseInt(theme.spacing(2), 10);
-      }),
-      flip(),
-      size(),
-    ],
-    whileElementsMounted: autoUpdate,
-    open: true,
-    placement: 'bottom-start',
-  });
-
   useEffect(() => {
     onFilterChange?.(optionsInDropDown);
   }, [onFilterChange, optionsInDropDown]);
 
   useListenClickOutside({
-    refs: [refs.floating],
+    refs: [containerRef],
     callback: (event) => {
       event.stopImmediatePropagation();
 
@@ -113,6 +77,7 @@ export const SelectInput = ({
         onCancel();
       }
     },
+    listenerId: 'select-input',
   });
 
   useScopedHotkeys(
@@ -130,44 +95,39 @@ export const SelectInput = ({
   );
 
   return (
-    <StyledRelationPickerContainer
+    <DropdownMenu ref={containerRef} data-select-disable>
-      ref={refs.setFloating}
+      <DropdownMenuSearchInput
-      style={floatingStyles}
+        value={searchFilter}
-    >
+        onChange={(e) => setSearchFilter(e.target.value)}
-      <DropdownMenu ref={containerRef} data-select-disable>
+        autoFocus
-        <DropdownMenuSearchInput
+      />
-          value={searchFilter}
+      <DropdownMenuSeparator />
-          onChange={(e) => setSearchFilter(e.target.value)}
+      <DropdownMenuItemsContainer hasMaxHeight>
-          autoFocus
+        {onClear && clearLabel && (
-        />
+          <MenuItemSelectTag
-        <DropdownMenuSeparator />
+            key={`No ${clearLabel}`}
-        <DropdownMenuItemsContainer hasMaxHeight>
+            selected={false}
-          {onClear && clearLabel && (
+            text={`No ${clearLabel}`}
+            color="transparent"
+            variant="outline"
+            onClick={() => {
+              setSelectedOption(undefined);
+              onClear();
+            }}
+          />
+        )}
+        {optionsInDropDown.map((option) => {
+          return (
             <MenuItemSelectTag
-              key={`No ${clearLabel}`}
+              key={option.value}
-              selected={false}
+              selected={selectedOption?.value === option.value}
-              text={`No ${clearLabel}`}
+              text={option.label}
-              color="transparent"
+              color={option.color as TagColor}
-              variant="outline"
+              onClick={() => handleOptionChange(option)}
-              onClick={() => {
-                setSelectedOption(undefined);
-                onClear();
-              }}
             />
-          )}
+          );
-          {optionsInDropDown.map((option) => {
+        })}
-            return (
+      </DropdownMenuItemsContainer>
-              <MenuItemSelectTag
+    </DropdownMenu>
-                key={option.value}
-                selected={selectedOption?.value === option.value}
-                text={option.label}
-                color={option.color as TagColor}
-                onClick={() => handleOptionChange(option)}
-              />
-            );
-          })}
-        </DropdownMenuItemsContainer>
-      </DropdownMenu>
-    </StyledRelationPickerContainer>
   );
 };

packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton.tsx

@@ -10,11 +10,7 @@ import { CurrencyPickerHotkeyScope } from '../types/CurrencyPickerHotkeyScope';
 
 import { CurrencyPickerDropdownSelect } from './CurrencyPickerDropdownSelect';
 
-type StyledDropdownButtonProps = {
+const StyledDropdownButtonContainer = styled.div`
-  isUnfolded: boolean;
-};
-
-const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProps>`
   align-items: center;
   color: ${({ color }) => color ?? 'none'};
   cursor: pointer;
@@ -62,7 +58,7 @@ export const CurrencyPickerDropdownButton = ({
 }) => {
   const theme = useTheme();
 
-  const { isDropdownOpen, closeDropdown } = useDropdown(
+  const { closeDropdown } = useDropdown(
     CurrencyPickerHotkeyScope.CurrencyPicker,
   );
 
@@ -77,11 +73,10 @@ export const CurrencyPickerDropdownButton = ({
 
   return (
     <Dropdown
-      dropdownMenuWidth={200}
+      dropdownId="currency-picker-dropdown-id"
-      dropdownId="currncy-picker-dropdown-id"
       dropdownHotkeyScope={{ scope: CurrencyPickerHotkeyScope.CurrencyPicker }}
       clickableComponent={
-        <StyledDropdownButtonContainer isUnfolded={isDropdownOpen}>
+        <StyledDropdownButtonContainer>
           <StyledIconContainer>
             {currencyCode}
             <IconChevronDown size={theme.icon.size.sm} />

packages/twenty-front/src/modules/ui/input/components/internal/currency/components/CurrencyPickerDropdownSelect.tsx

@@ -32,7 +32,7 @@ export const CurrencyPickerDropdownSelect = ({
   );
 
   return (
-    <DropdownMenu width="240px" disableBlur>
+    <DropdownMenu disableBlur>
       <DropdownMenuSearchInput
         value={searchFilter}
         onChange={(event) => setSearchFilter(event.target.value)}

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

@@ -1,32 +1,26 @@
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
-import { HotkeyEffect } from '@/ui/utilities/hotkey/components/HotkeyEffect';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
 import {
   autoUpdate,
   flip,
-  FloatingPortal,
   offset,
   Placement,
   size,
   useFloating,
 } from '@floating-ui/react';
-import { MouseEvent, ReactNode, useEffect, useRef } from 'react';
+import { MouseEvent, ReactNode } from 'react';
-import { flushSync } from 'react-dom';
 import { Keys } from 'react-hotkeys-hook';
-import { Key } from 'ts-key-enum';
-import { isDefined } from '~/utils/isDefined';
 
 import { useDropdown } from '../hooks/useDropdown';
-import { useInternalHotkeyScopeManagement } from '../hooks/useInternalHotkeyScopeManagement';
 
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownUnmountEffect } from '@/ui/layout/dropdown/components/DropdownUnmountEffect';
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponeInstanceContext';
 import { dropdownMaxHeightComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownMaxHeightComponentStateV2';
-import { useListenClickOutsideV2 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
-import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { flushSync } from 'react-dom';
-import { DropdownMenu } from './DropdownMenu';
+import { isDefined } from 'twenty-ui';
 import { DropdownOnToggleEffect } from './DropdownOnToggleEffect';
 
 type DropdownProps = {
@@ -62,24 +56,15 @@ export const Dropdown = ({
   dropdownStrategy = 'absolute',
   dropdownOffset = { x: 0, y: 0 },
   disableBlur = false,
-  usePortal = false,
   onClickOutside,
   onClose,
   onOpen,
 }: DropdownProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
+  const { isDropdownOpen, toggleDropdown } = useDropdown(dropdownId);
-
-  const {
-    isDropdownOpen,
-    toggleDropdown,
-    closeDropdown,
-    dropdownWidth,
-    setDropdownPlacement,
-  } = useDropdown(dropdownId);
 
   const offsetMiddlewares = [];
 
-  const [dropdownMaxHeight, setDropdownMaxHeight] = useRecoilComponentStateV2(
+  const setDropdownMaxHeight = useSetRecoilComponentStateV2(
     dropdownMaxHeightComponentStateV2,
     dropdownId,
   );
@@ -111,14 +96,6 @@ export const Dropdown = ({
     strategy: dropdownStrategy,
   });
 
-  useEffect(() => {
-    setDropdownPlacement(placement);
-  }, [placement, setDropdownPlacement]);
-
-  const handleHotkeyTriggered = () => {
-    toggleDropdown();
-  };
-
   const handleClickableComponentClick = (event: MouseEvent) => {
     event.stopPropagation();
     event.preventDefault();
@@ -127,88 +104,41 @@ export const Dropdown = ({
     onClickOutside?.();
   };
 
-  useListenClickOutsideV2({
-    refs: [refs.floating, refs.domReference],
-    listenerId: dropdownId,
-    callback: () => {
-      onClickOutside?.();
-      if (isDropdownOpen) {
-        closeDropdown();
-      }
-    },
-  });
-
-  useInternalHotkeyScopeManagement({
-    dropdownScopeId: getScopeIdFromComponentId(dropdownId),
-    dropdownHotkeyScopeFromParent: dropdownHotkeyScope,
-  });
-
-  useScopedHotkeys(
-    [Key.Escape],
-    () => {
-      if (isDropdownOpen) {
-        closeDropdown();
-      }
-    },
-    dropdownHotkeyScope.scope,
-    [closeDropdown, isDropdownOpen],
-  );
-
-  const dropdownMenuStyles = {
-    ...floatingStyles,
-    maxHeight: dropdownMaxHeight,
-  };
-
   return (
     <DropdownComponentInstanceContext.Provider
       value={{ instanceId: dropdownId }}
     >
       <DropdownScope dropdownScopeId={getScopeIdFromComponentId(dropdownId)}>
-        <div ref={containerRef} className={className}>
+        <>
           {clickableComponent && (
             <div
               ref={refs.setReference}
               onClick={handleClickableComponentClick}
-              className={className}
             >
               {clickableComponent}
             </div>
           )}
-          {hotkey && (
+          {isDropdownOpen && (
-            <HotkeyEffect
+            <DropdownContent
-              hotkey={hotkey}
+              className={className}
-              onHotkeyTriggered={handleHotkeyTriggered}
+              floatingStyles={floatingStyles}
-            />
-          )}
-          {isDropdownOpen && usePortal && (
-            <FloatingPortal>
-              <DropdownMenu
-                disableBlur={disableBlur}
-                width={dropdownMenuWidth ?? dropdownWidth}
-                data-select-disable
-                ref={refs.setFloating}
-                style={dropdownMenuStyles}
-              >
-                {dropdownComponents}
-              </DropdownMenu>
-            </FloatingPortal>
-          )}
-          {isDropdownOpen && !usePortal && (
-            <DropdownMenu
               disableBlur={disableBlur}
-              width={dropdownMenuWidth ?? dropdownWidth}
+              dropdownMenuWidth={dropdownMenuWidth}
-              data-select-disable
+              dropdownComponents={dropdownComponents}
-              ref={refs.setFloating}
+              dropdownId={dropdownId}
-              style={dropdownMenuStyles}
+              dropdownPlacement={placement ?? 'bottom-end'}
-            >
+              floatingUiRefs={refs}
-              {dropdownComponents}
+              hotkeyScope={dropdownHotkeyScope}
-            </DropdownMenu>
+              hotkey={hotkey}
+              onClickOutside={onClickOutside}
+              onHotkeyTriggered={toggleDropdown}
+            />
           )}
           <DropdownOnToggleEffect
             onDropdownClose={onClose}
             onDropdownOpen={onOpen}
           />
-        </div>
+        </>
       </DropdownScope>
       <DropdownUnmountEffect dropdownId={dropdownId} />
     </DropdownComponentInstanceContext.Provider>

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

@@ -0,0 +1,128 @@
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useInternalHotkeyScopeManagement } from '@/ui/layout/dropdown/hooks/useInternalHotkeyScopeManagement';
+import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
+import { dropdownMaxHeightComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownMaxHeightComponentStateV2';
+import { HotkeyEffect } from '@/ui/utilities/hotkey/components/HotkeyEffect';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import {
+  FloatingPortal,
+  Placement,
+  UseFloatingReturn,
+} from '@floating-ui/react';
+import { useEffect } from 'react';
+import { Keys } from 'react-hotkeys-hook';
+import { useRecoilValue } from 'recoil';
+import { Key } from 'ts-key-enum';
+
+export type DropdownContentProps = {
+  className?: string;
+  dropdownId: string;
+  dropdownPlacement: Placement;
+  floatingUiRefs: UseFloatingReturn['refs'];
+  onClickOutside?: () => void;
+  hotkeyScope: HotkeyScope;
+  floatingStyles: UseFloatingReturn['floatingStyles'];
+  hotkey?: {
+    key: Keys;
+    scope: string;
+  };
+  onHotkeyTriggered?: () => void;
+  disableBlur?: boolean;
+  dropdownMenuWidth?: `${string}px` | `${number}%` | 'auto' | number;
+  dropdownComponents: React.ReactNode;
+  parentDropdownId?: string;
+};
+
+export const DropdownContent = ({
+  className,
+  dropdownId,
+  dropdownPlacement,
+  floatingUiRefs,
+  onClickOutside,
+  hotkeyScope,
+  floatingStyles,
+  hotkey,
+  onHotkeyTriggered,
+  disableBlur,
+  dropdownMenuWidth,
+  dropdownComponents,
+}: DropdownContentProps) => {
+  const { isDropdownOpen, closeDropdown, dropdownWidth, setDropdownPlacement } =
+    useDropdown(dropdownId);
+
+  const activeDropdownFocusId = useRecoilValue(activeDropdownFocusIdState);
+
+  const [dropdownMaxHeight] = useRecoilComponentStateV2(
+    dropdownMaxHeightComponentStateV2,
+    dropdownId,
+  );
+
+  useEffect(() => {
+    setDropdownPlacement(dropdownPlacement);
+  }, [dropdownPlacement, setDropdownPlacement]);
+
+  useListenClickOutside({
+    refs: [floatingUiRefs.floating, floatingUiRefs.domReference],
+    listenerId: dropdownId,
+    callback: (event) => {
+      if (activeDropdownFocusId !== dropdownId) return;
+
+      if (isDropdownOpen) {
+        event.stopImmediatePropagation();
+        event.preventDefault();
+
+        closeDropdown();
+      }
+
+      onClickOutside?.();
+    },
+  });
+
+  useInternalHotkeyScopeManagement({
+    dropdownScopeId: getScopeIdFromComponentId(dropdownId),
+    dropdownHotkeyScopeFromParent: hotkeyScope,
+  });
+
+  useScopedHotkeys(
+    [Key.Escape],
+    () => {
+      if (activeDropdownFocusId !== dropdownId) return;
+
+      if (isDropdownOpen) {
+        closeDropdown();
+      }
+    },
+    hotkeyScope?.scope,
+    [closeDropdown, isDropdownOpen],
+  );
+
+  const dropdownMenuStyles = {
+    ...floatingStyles,
+    maxHeight: dropdownMaxHeight,
+  };
+
+  return (
+    <>
+      {hotkey && onHotkeyTriggered && (
+        <HotkeyEffect hotkey={hotkey} onHotkeyTriggered={onHotkeyTriggered} />
+      )}
+      <FloatingPortal>
+        <DropdownMenu
+          className={className}
+          disableBlur={disableBlur}
+          width={dropdownMenuWidth ?? dropdownWidth}
+          data-select-disable
+          ref={floatingUiRefs.setFloating}
+          style={dropdownMenuStyles}
+        >
+          {dropdownComponents}
+        </DropdownMenu>
+      </FloatingPortal>
+    </>
+  );
+};

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

@@ -18,7 +18,6 @@ const StyledHeader = styled.li`
   padding: ${({ theme }) => theme.spacing(1)};
 
   user-select: none;
-  width: inherit;
 
   &:hover {
     background: ${({ theme, onClick }) =>

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

@@ -44,7 +44,7 @@ const StyledInputContainer = styled.div`
 
 const StyledRightContainer = styled.div`
   position: absolute;
-  right: ${({ theme }) => theme.spacing(1)};
+  right: ${({ theme }) => theme.spacing(2)};
   top: 50%;
   transform: translateY(-50%);
 `;

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

@@ -37,12 +37,14 @@ export const DropdownMenuItemsContainer = ({
   children,
   hasMaxHeight,
   className,
+  withoutScrollWrapper,
 }: {
   children: React.ReactNode;
   hasMaxHeight?: boolean;
   className?: string;
+  withoutScrollWrapper?: boolean;
 }) => {
-  return (
+  return withoutScrollWrapper === true ? (
     <StyledDropdownMenuItemsExternalContainer
       hasMaxHeight={hasMaxHeight}
       className={className}
@@ -59,5 +61,16 @@ export const DropdownMenuItemsContainer = ({
         </StyledDropdownMenuItemsInternalContainer>
       )}
     </StyledDropdownMenuItemsExternalContainer>
+  ) : (
+    <ScrollWrapper contextProviderName="dropdownMenuItemsContainer">
+      <StyledDropdownMenuItemsExternalContainer
+        hasMaxHeight={hasMaxHeight}
+        className={className}
+      >
+        <StyledDropdownMenuItemsInternalContainer>
+          {children}
+        </StyledDropdownMenuItemsInternalContainer>
+      </StyledDropdownMenuItemsExternalContainer>
+    </ScrollWrapper>
   );
 };

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts

@@ -1,6 +1,8 @@
 import { useRecoilState } from 'recoil';
 
 import { useDropdownStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownStates';
+import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
+import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
 import { useCallback } from 'react';
@@ -17,6 +19,12 @@ export const useDropdown = (dropdownId?: string) => {
     dropdownScopeId: getScopeIdOrUndefinedFromComponentId(dropdownId),
   });
 
+  const { setActiveDropdownFocusIdAndMemorizePrevious } =
+    useSetActiveDropdownFocusIdAndMemorizePrevious();
+
+  const { goBackToPreviousDropdownFocusId } =
+    useGoBackToPreviousDropdownFocusId();
+
   const {
     setHotkeyScopeAndMemorizePreviousScope,
     goBackToPreviousHotkeyScope,
@@ -34,17 +42,28 @@ export const useDropdown = (dropdownId?: string) => {
     useRecoilState(isDropdownOpenState);
 
   const closeDropdown = useCallback(() => {
-    goBackToPreviousHotkeyScope();
+    if (isDropdownOpen) {
-    setIsDropdownOpen(false);
+      goBackToPreviousHotkeyScope();
-  }, [goBackToPreviousHotkeyScope, setIsDropdownOpen]);
+      setIsDropdownOpen(false);
+      goBackToPreviousDropdownFocusId();
+    }
+  }, [
+    isDropdownOpen,
+    goBackToPreviousHotkeyScope,
+    setIsDropdownOpen,
+    goBackToPreviousDropdownFocusId,
+  ]);
 
   const openDropdown = () => {
-    setIsDropdownOpen(true);
+    if (!isDropdownOpen) {
-    if (isDefined(dropdownHotkeyScope)) {
+      setIsDropdownOpen(true);
-      setHotkeyScopeAndMemorizePreviousScope(
+      setActiveDropdownFocusIdAndMemorizePrevious(dropdownId ?? scopeId);
-        dropdownHotkeyScope.scope,
+      if (isDefined(dropdownHotkeyScope)) {
-        dropdownHotkeyScope.customScopes,
+        setHotkeyScopeAndMemorizePreviousScope(
-      );
+          dropdownHotkeyScope.scope,
+          dropdownHotkeyScope.customScopes,
+        );
+      }
     }
   };
 

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId.ts

@@ -0,0 +1,23 @@
+import { useRecoilCallback } from 'recoil';
+
+import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
+import { previousDropdownFocusIdState } from '@/ui/layout/dropdown/states/previousDropdownFocusIdState';
+
+export const useGoBackToPreviousDropdownFocusId = () => {
+  const goBackToPreviousDropdownFocusId = useRecoilCallback(
+    ({ snapshot, set }) =>
+      () => {
+        const previouslyFocusedDropdownId = snapshot
+          .getLoadable(previousDropdownFocusIdState)
+          .getValue();
+
+        set(activeDropdownFocusIdState, previouslyFocusedDropdownId);
+        set(previousDropdownFocusIdState, null);
+      },
+    [],
+  );
+
+  return {
+    goBackToPreviousDropdownFocusId,
+  };
+};

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious.ts

@@ -0,0 +1,23 @@
+import { useRecoilCallback } from 'recoil';
+
+import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
+import { previousDropdownFocusIdState } from '@/ui/layout/dropdown/states/previousDropdownFocusIdState';
+
+export const useSetActiveDropdownFocusIdAndMemorizePrevious = () => {
+  const setActiveDropdownFocusIdAndMemorizePrevious = useRecoilCallback(
+    ({ snapshot, set }) =>
+      (dropdownId: string) => {
+        const focusedDropdownId = snapshot
+          .getLoadable(activeDropdownFocusIdState)
+          .getValue();
+
+        set(previousDropdownFocusIdState, focusedDropdownId);
+        set(activeDropdownFocusIdState, dropdownId);
+      },
+    [],
+  );
+
+  return {
+    setActiveDropdownFocusIdAndMemorizePrevious,
+  };
+};

packages/twenty-front/src/modules/ui/layout/dropdown/states/activeDropdownFocusIdState.ts

@@ -0,0 +1,6 @@
+import { createState } from 'twenty-ui';
+
+export const activeDropdownFocusIdState = createState<string | null>({
+  key: 'activeDropdownFocusIdState',
+  defaultValue: null,
+});

packages/twenty-front/src/modules/ui/layout/dropdown/states/previousDropdownFocusIdState.ts

@@ -0,0 +1,6 @@
+import { createState } from 'twenty-ui';
+
+export const previousDropdownFocusIdState = createState<string | null>({
+  key: 'previousDropdownFocusIdState',
+  defaultValue: null,
+});

packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandableList.tsx

@@ -4,7 +4,6 @@ import { AnimatedContainer, Chip, ChipVariant } from 'twenty-ui';
 
 import { ExpandedListDropdown } from '@/ui/layout/expandable-list/components/ExpandedListDropdown';
 import { isFirstOverflowingChildElement } from '@/ui/layout/expandable-list/utils/isFirstOverflowingChildElement';
-import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from '~/utils/isDefined';
 
 const StyledContainer = styled.div`
@@ -101,20 +100,18 @@ export const ExpandableList = ({
     resetFirstHiddenChildIndex();
   }, [isChipCountDisplayed, children.length, resetFirstHiddenChildIndex]);
 
-  useListenClickOutside({
+  const handleClickOutside = () => {
-    refs: [containerRef],
+    setIsListExpanded(false);
-    callback: () => {
+
-      // Handle container resize
+    if (
-      if (
+      childrenContainerElement?.clientWidth !== previousChildrenContainerWidth
-        childrenContainerElement?.clientWidth !== previousChildrenContainerWidth
+    ) {
-      ) {
+      resetFirstHiddenChildIndex();
-        resetFirstHiddenChildIndex();
+      setPreviousChildrenContainerWidth(
-        setPreviousChildrenContainerWidth(
+        childrenContainerElement?.clientWidth ?? 0,
-          childrenContainerElement?.clientWidth ?? 0,
+      );
-        );
+    }
-      }
+  };
-    },
-  });
 
   return (
     <StyledContainer
@@ -163,10 +160,7 @@ export const ExpandableList = ({
       {isListExpanded && (
         <ExpandedListDropdown
           anchorElement={containerRef.current ?? undefined}
-          onClickOutside={() => {
+          onClickOutside={handleClickOutside}
-            resetFirstHiddenChildIndex();
-            setIsListExpanded(false);
-          }}
           withBorder={withExpandedListBorder}
         >
           {children}

packages/twenty-front/src/modules/ui/layout/expandable-list/components/ExpandedListDropdown.tsx

@@ -46,8 +46,11 @@ export const ExpandedListDropdown = ({
   });
 
   useListenClickOutside({
-    refs: [refs.floating],
+    refs: [refs.domReference],
-    callback: onClickOutside ?? (() => {}),
+    callback: () => {
+      onClickOutside?.();
+    },
+    listenerId: 'expandable-list',
   });
 
   return (

packages/twenty-front/src/modules/ui/layout/modal/components/Modal.tsx

@@ -3,8 +3,8 @@ import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousH
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import {
   ClickOutsideMode,
-  useListenClickOutsideV2,
+  useListenClickOutside,
-} from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
+} from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
@@ -207,7 +207,7 @@ export const Modal = ({
     hotkeyScope,
   );
 
-  useListenClickOutsideV2({
+  useListenClickOutside({
     refs: [modalRef],
     listenerId: 'MODAL_CLICK_OUTSIDE_LISTENER_ID',
     callback: () => {

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx

@@ -1,26 +1,19 @@
-import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
 import { isRightDrawerAnimationCompletedState } from '@/ui/layout/right-drawer/states/isRightDrawerAnimationCompletedState';
 import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
-import { rightDrawerCloseEventState } from '@/ui/layout/right-drawer/states/rightDrawerCloseEventsState';
+
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
-import { ClickOutsideMode } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
-import { useRef } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
-import { Key } from 'ts-key-enum';
 import { isDefined } from '~/utils/isDefined';
 
-import { useRightDrawer } from '../hooks/useRightDrawer';
 import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
-import { RightDrawerHotkeyScope } from '../types/RightDrawerHotkeyScope';
 
+import { RIGHT_DRAWER_ANIMATION_VARIANTS } from '@/ui/layout/right-drawer/constants/RightDrawerAnimationVariants';
+import { RightDrawerAnimationVariant } from '@/ui/layout/right-drawer/types/RightDrawerAnimationVariant';
 import { RightDrawerRouter } from './RightDrawerRouter';
-import { workflowReactFlowRefState } from '@/workflow/states/workflowReactFlowRefState';
 
 const StyledContainer = styled(motion.div)<{ isRightDrawerMinimized: boolean }>`
   background: ${({ theme }) => theme.background.primary};
@@ -40,7 +33,7 @@ const StyledContainer = styled(motion.div)<{ isRightDrawerMinimized: boolean }>`
 
   right: 0;
   top: 0;
-  z-index: 100;
+  z-index: 30;
 
   .modal-backdrop {
     background: ${({ theme }) => theme.background.overlayTertiary};
@@ -56,39 +49,6 @@ const StyledRightDrawer = styled.div`
 export const RightDrawer = () => {
   const theme = useTheme();
 
-  const animationVariants = {
-    fullScreen: {
-      x: '0%',
-      width: '100%',
-      height: '100%',
-      bottom: '0',
-      top: '0',
-    },
-    normal: {
-      x: '0%',
-      width: theme.rightDrawerWidth,
-      height: '100%',
-      bottom: '0',
-      top: '0',
-    },
-    closed: {
-      x: '100%',
-      width: '0',
-      height: '100%',
-      bottom: '0',
-      top: 'auto',
-    },
-    minimized: {
-      x: '0%',
-      width: 220,
-      height: 41,
-      bottom: '0',
-      top: 'auto',
-    },
-  };
-
-  type RightDrawerAnimationVariant = keyof typeof animationVariants;
-
   const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
 
   const isRightDrawerMinimized = useRecoilValue(isRightDrawerMinimizedState);
@@ -99,52 +59,6 @@ export const RightDrawer = () => {
 
   const rightDrawerPage = useRecoilValue(rightDrawerPageState);
 
-  const { closeRightDrawer } = useRightDrawer();
-
-  const rightDrawerRef = useRef<HTMLDivElement>(null);
-  const workflowReactFlowRef = useRecoilValue(workflowReactFlowRefState);
-
-  const { useListenClickOutside } = useClickOutsideListener(
-    RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID,
-  );
-
-  useListenClickOutside({
-    refs: [
-      rightDrawerRef,
-      ...(workflowReactFlowRef ? [workflowReactFlowRef] : []),
-    ],
-    callback: useRecoilCallback(
-      ({ snapshot, set }) =>
-        (event) => {
-          const isRightDrawerOpen = snapshot
-            .getLoadable(isRightDrawerOpenState)
-            .getValue();
-          const isRightDrawerMinimized = snapshot
-            .getLoadable(isRightDrawerMinimizedState)
-            .getValue();
-
-          if (isRightDrawerOpen && !isRightDrawerMinimized) {
-            set(rightDrawerCloseEventState, event);
-
-            closeRightDrawer();
-          }
-        },
-      [closeRightDrawer],
-    ),
-    mode: ClickOutsideMode.comparePixels,
-  });
-
-  useScopedHotkeys(
-    [Key.Escape],
-    () => {
-      if (isRightDrawerOpen && !isRightDrawerMinimized) {
-        closeRightDrawer();
-      }
-    },
-    RightDrawerHotkeyScope.RightDrawer,
-    [isRightDrawerOpen, isRightDrawerMinimized],
-  );
-
   const isMobile = useIsMobile();
 
   const targetVariantForAnimation: RightDrawerAnimationVariant =
@@ -168,13 +82,13 @@ export const RightDrawer = () => {
     <StyledContainer
       isRightDrawerMinimized={isRightDrawerMinimized}
       animate={targetVariantForAnimation}
-      variants={animationVariants}
+      variants={RIGHT_DRAWER_ANIMATION_VARIANTS}
       transition={{
         duration: theme.animation.duration.normal,
       }}
       onAnimationComplete={handleAnimationComplete}
     >
-      <StyledRightDrawer ref={rightDrawerRef}>
+      <StyledRightDrawer>
         {isRightDrawerOpen && <RightDrawerRouter />}
       </StyledRightDrawer>
     </StyledContainer>

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerContainer.tsx

@@ -0,0 +1,83 @@
+import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
+import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
+import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
+import { isRightDrawerOpenState } from '@/ui/layout/right-drawer/states/isRightDrawerOpenState';
+import { rightDrawerCloseEventState } from '@/ui/layout/right-drawer/states/rightDrawerCloseEventsState';
+import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import {
+  ClickOutsideMode,
+  useListenClickOutside,
+} from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { workflowReactFlowRefState } from '@/workflow/states/workflowReactFlowRefState';
+import styled from '@emotion/styled';
+import { useRef } from 'react';
+import { useRecoilCallback, useRecoilValue } from 'recoil';
+import { Key } from 'ts-key-enum';
+
+const StyledRightDrawerPage = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+`;
+
+export const RightDrawerContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const rightDrawerRef = useRef<HTMLDivElement>(null);
+
+  const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
+
+  const isRightDrawerMinimized = useRecoilValue(isRightDrawerMinimizedState);
+
+  const { closeRightDrawer } = useRightDrawer();
+
+  const workflowReactFlowRef = useRecoilValue(workflowReactFlowRefState);
+
+  useListenClickOutside({
+    refs: [
+      rightDrawerRef,
+      ...(workflowReactFlowRef ? [workflowReactFlowRef] : []),
+    ],
+    listenerId: RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID,
+    callback: useRecoilCallback(
+      ({ snapshot, set }) =>
+        (event) => {
+          const isRightDrawerOpen = snapshot
+            .getLoadable(isRightDrawerOpenState)
+            .getValue();
+          const isRightDrawerMinimized = snapshot
+            .getLoadable(isRightDrawerMinimizedState)
+            .getValue();
+
+          if (isRightDrawerOpen && !isRightDrawerMinimized) {
+            set(rightDrawerCloseEventState, event);
+
+            closeRightDrawer();
+          }
+        },
+      [closeRightDrawer],
+    ),
+    mode: ClickOutsideMode.comparePixels,
+  });
+
+  useScopedHotkeys(
+    [Key.Escape],
+    () => {
+      if (isRightDrawerOpen && !isRightDrawerMinimized) {
+        closeRightDrawer();
+      }
+    },
+    RightDrawerHotkeyScope.RightDrawer,
+    [isRightDrawerOpen, isRightDrawerMinimized],
+  );
+
+  return (
+    <StyledRightDrawerPage ref={rightDrawerRef}>
+      {children}
+    </StyledRightDrawerPage>
+  );
+};

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerRouter.tsx

@@ -7,22 +7,16 @@ import { RightDrawerEmailThread } from '@/activities/emails/right-drawer/compone
 import { RightDrawerRecord } from '@/object-record/record-right-drawer/components/RightDrawerRecord';
 import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
 
+import { RightDrawerContainer } from '@/ui/layout/right-drawer/components/RightDrawerContainer';
 import { RightDrawerTopBar } from '@/ui/layout/right-drawer/components/RightDrawerTopBar';
 import { ComponentByRightDrawerPage } from '@/ui/layout/right-drawer/types/ComponentByRightDrawerPage';
 import { RightDrawerWorkflowEditStep } from '@/workflow/components/RightDrawerWorkflowEditStep';
 import { RightDrawerWorkflowSelectAction } from '@/workflow/components/RightDrawerWorkflowSelectAction';
+import { RightDrawerWorkflowSelectTriggerType } from '@/workflow/components/RightDrawerWorkflowSelectTriggerType';
 import { RightDrawerWorkflowViewStep } from '@/workflow/components/RightDrawerWorkflowViewStep';
 import { isDefined } from 'twenty-ui';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
 import { RightDrawerPages } from '../types/RightDrawerPages';
-import { RightDrawerWorkflowSelectTriggerType } from '@/workflow/components/RightDrawerWorkflowSelectTriggerType';
-
-const StyledRightDrawerPage = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-`;
 
 const StyledRightDrawerBody = styled.div`
   display: flex;
@@ -61,13 +55,13 @@ export const RightDrawerRouter = () => {
   const isRightDrawerMinimized = useRecoilValue(isRightDrawerMinimizedState);
 
   return (
-    <StyledRightDrawerPage>
+    <RightDrawerContainer>
       <RightDrawerTopBar />
       {!isRightDrawerMinimized && (
         <StyledRightDrawerBody>
           {rightDrawerPageComponent}
         </StyledRightDrawerBody>
       )}
-    </StyledRightDrawerPage>
+    </RightDrawerContainer>
   );
 };

packages/twenty-front/src/modules/ui/layout/right-drawer/constants/RightDrawerAnimationVariants.ts

@@ -0,0 +1,32 @@
+import { THEME_COMMON } from 'twenty-ui';
+
+export const RIGHT_DRAWER_ANIMATION_VARIANTS = {
+  fullScreen: {
+    x: '0%',
+    width: '100%',
+    height: '100%',
+    bottom: '0',
+    top: '0',
+  },
+  normal: {
+    x: '0%',
+    width: THEME_COMMON.rightDrawerWidth,
+    height: '100%',
+    bottom: '0',
+    top: '0',
+  },
+  closed: {
+    x: '100%',
+    width: '0',
+    height: '100%',
+    bottom: '0',
+    top: 'auto',
+  },
+  minimized: {
+    x: '0%',
+    width: 220,
+    height: 41,
+    bottom: '0',
+    top: 'auto',
+  },
+};

packages/twenty-front/src/modules/ui/layout/right-drawer/types/RightDrawerAnimationVariant.ts

@@ -0,0 +1,4 @@
+import { RIGHT_DRAWER_ANIMATION_VARIANTS } from '@/ui/layout/right-drawer/constants/RightDrawerAnimationVariants';
+
+export type RightDrawerAnimationVariant =
+  keyof typeof RIGHT_DRAWER_ANIMATION_VARIANTS;

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerInput.tsx

@@ -96,6 +96,7 @@ export const NavigationDrawerInput = ({
       event.stopImmediatePropagation();
       onClickOutside(event, value);
     },
+    listenerId: 'navigation-drawer-input',
   });
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {

packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useListenClickOutside.test.tsx

@@ -1,12 +1,12 @@
+import { fireEvent, renderHook } from '@testing-library/react';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { fireEvent, renderHook } from '@testing-library/react';
 import { RecoilRoot } from 'recoil';
 
 import {
   ClickOutsideMode,
-  useListenClickOutsideV2,
+  useListenClickOutside,
-} from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
+} from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from '~/utils/isDefined';
 
 const containerRef = React.createRef<HTMLDivElement>();
@@ -19,13 +19,13 @@ const Wrapper = ({ children }: { children: React.ReactNode }) => (
 );
 
 const listenerId = 'listenerId';
-describe('useListenClickOutsideV2', () => {
+describe('useListenClickOutside', () => {
   it('should trigger the callback when clicking outside the specified refs', () => {
     const callback = jest.fn();
 
     renderHook(
       () =>
-        useListenClickOutsideV2({
+        useListenClickOutside({
           refs: [containerRef],
           callback,
           listenerId,
@@ -46,7 +46,7 @@ describe('useListenClickOutsideV2', () => {
 
     renderHook(
       () =>
-        useListenClickOutsideV2({
+        useListenClickOutside({
           refs: [nullRef],
           callback,
           mode: ClickOutsideMode.comparePixels,
@@ -68,7 +68,7 @@ describe('useListenClickOutsideV2', () => {
 
     renderHook(
       () =>
-        useListenClickOutsideV2({
+        useListenClickOutside({
           refs: [containerRef],
           callback,
           listenerId,
@@ -91,7 +91,7 @@ describe('useListenClickOutsideV2', () => {
 
     renderHook(
       () =>
-        useListenClickOutsideV2({
+        useListenClickOutside({
           refs: [containerRef],
           callback,
           mode: ClickOutsideMode.comparePixels,

packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/__tests__/useListenClickOutsideArrayOfRef.test.tsx

@@ -1,78 +0,0 @@
-import { fireEvent, renderHook } from '@testing-library/react';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-
-import { isDefined } from '~/utils/isDefined';
-
-import {
-  ClickOutsideMode,
-  useListenClickOutside,
-} from '../useListenClickOutside';
-
-const containerRef = React.createRef<HTMLDivElement>();
-const nullRef = React.createRef<HTMLDivElement>();
-
-const Wrapper = ({ children }: { children: React.ReactNode }) => (
-  <div ref={containerRef}>{children}</div>
-);
-
-describe('useListenClickOutside', () => {
-  it('should trigger the callback when clicking outside the specified refs', () => {
-    const callback = jest.fn();
-
-    renderHook(
-      () => useListenClickOutside({ refs: [containerRef], callback }),
-      { wrapper: Wrapper },
-    );
-
-    act(() => {
-      fireEvent.mouseDown(document);
-      fireEvent.click(document);
-    });
-
-    expect(callback).toHaveBeenCalled();
-  });
-
-  it('should not call the callback when clicking inside the specified refs using pixel comparison', () => {
-    const callback = jest.fn();
-
-    renderHook(
-      () =>
-        useListenClickOutside({
-          refs: [containerRef, nullRef],
-          callback,
-          mode: ClickOutsideMode.comparePixels,
-        }),
-      { wrapper: Wrapper },
-    );
-
-    act(() => {
-      if (isDefined(containerRef.current)) {
-        fireEvent.mouseDown(containerRef.current);
-        fireEvent.click(containerRef.current);
-      }
-    });
-
-    expect(callback).not.toHaveBeenCalled();
-  });
-
-  it('should call the callback when clicking outside the specified refs using pixel comparison', () => {
-    const callback = jest.fn();
-
-    renderHook(() =>
-      useListenClickOutside({
-        refs: [containerRef, nullRef],
-        callback,
-        mode: ClickOutsideMode.comparePixels,
-      }),
-    );
-
-    act(() => {
-      // Simulate a click outside the specified refs
-      fireEvent.mouseDown(document.body);
-      fireEvent.click(document.body);
-    });
-
-    expect(callback).toHaveBeenCalled();
-  });
-});

packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOutsideListener.ts

@@ -2,10 +2,7 @@ import { useEffect } from 'react';
 import { useRecoilCallback } from 'recoil';
 
 import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
-import {
+
-  ClickOutsideListenerProps,
-  useListenClickOutsideV2,
-} from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
 import { ClickOutsideListenerCallback } from '@/ui/utilities/pointer-event/types/ClickOutsideListenerCallback';
 import { toSpliced } from '~/utils/array/toSpliced';
 import { isDefined } from '~/utils/isDefined';
@@ -17,35 +14,6 @@ export const useClickOutsideListener = (componentId: string) => {
     getClickOutsideListenerMouseDownHappenedState,
   } = useClickOustideListenerStates(componentId);
 
-  const useListenClickOutside = <T extends Element>({
-    callback,
-    refs,
-    enabled,
-    mode,
-  }: Omit<ClickOutsideListenerProps<T>, 'listenerId'>) => {
-    return useListenClickOutsideV2({
-      listenerId: componentId,
-      refs,
-      callback: useRecoilCallback(
-        ({ snapshot }) =>
-          (event) => {
-            callback(event);
-
-            const additionalCallbacks = snapshot
-              .getLoadable(getClickOutsideListenerCallbacksState)
-              .getValue();
-
-            additionalCallbacks.forEach((additionalCallback) => {
-              additionalCallback.callbackFunction(event);
-            });
-          },
-        [callback],
-      ),
-      enabled,
-      mode,
-    });
-  };
-
   const toggleClickOutsideListener = useRecoilCallback(
     ({ set }) =>
       (activated: boolean) => {
@@ -152,7 +120,6 @@ export const useClickOutsideListener = (componentId: string) => {
   };
 
   return {
-    useListenClickOutside,
     toggleClickOutsideListener,
     useRegisterClickOutsideListenerCallback,
   };

packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts

@@ -1,140 +1,266 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
+import { useRecoilCallback } from 'recoil';
+
+import { internalHotkeysEnabledScopesState } from '@/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState';
+import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
 
 export enum ClickOutsideMode {
   comparePixels = 'comparePixels',
   compareHTMLRef = 'compareHTMLRef',
 }
 
-export const useListenClickOutside = <T extends Element>({
+export type ClickOutsideListenerProps<T extends Element> = {
-  refs,
-  callback,
-  mode = ClickOutsideMode.compareHTMLRef,
-  enabled = true,
-}: {
   refs: Array<React.RefObject<T>>;
+  excludeClassNames?: string[];
   callback: (event: MouseEvent | TouchEvent) => void;
   mode?: ClickOutsideMode;
+  listenerId: string;
+  hotkeyScope?: string;
   enabled?: boolean;
-}) => {
+};
-  const [isMouseDownInside, setIsMouseDownInside] = useState(false);
+
+export const useListenClickOutside = <T extends Element>({
+  refs,
+  excludeClassNames,
+  callback,
+  mode = ClickOutsideMode.compareHTMLRef,
+  listenerId,
+  hotkeyScope,
+  enabled = true,
+}: ClickOutsideListenerProps<T>) => {
+  const {
+    getClickOutsideListenerIsMouseDownInsideState,
+    getClickOutsideListenerIsActivatedState,
+    getClickOutsideListenerMouseDownHappenedState,
+  } = useClickOustideListenerStates(listenerId);
+
+  const handleMouseDown = useRecoilCallback(
+    ({ snapshot, set }) =>
+      (event: MouseEvent | TouchEvent) => {
+        const clickOutsideListenerIsActivated = snapshot
+          .getLoadable(getClickOutsideListenerIsActivatedState)
+          .getValue();
+
+        set(getClickOutsideListenerMouseDownHappenedState, true);
+
+        const currentHotkeyScopes = snapshot
+          .getLoadable(internalHotkeysEnabledScopesState)
+          .getValue();
+
+        const isListeningBasedOnHotkeyScope = hotkeyScope
+          ? currentHotkeyScopes.includes(hotkeyScope)
+          : true;
+
+        const isListening =
+          clickOutsideListenerIsActivated &&
+          enabled &&
+          isListeningBasedOnHotkeyScope;
+
+        if (!isListening) {
+          return;
+        }
+
+        if (mode === ClickOutsideMode.compareHTMLRef) {
+          const clickedOnAtLeastOneRef = refs
+            .filter((ref) => !!ref.current)
+            .some((ref) => ref.current?.contains(event.target as Node));
+
+          set(
+            getClickOutsideListenerIsMouseDownInsideState,
+            clickedOnAtLeastOneRef,
+          );
+        }
+
+        if (mode === ClickOutsideMode.comparePixels) {
+          const clickedOnAtLeastOneRef = refs
+            .filter((ref) => !!ref.current)
+            .some((ref) => {
+              if (!ref.current) {
+                return false;
+              }
+
+              const { x, y, width, height } =
+                ref.current.getBoundingClientRect();
+
+              const clientX =
+                'clientX' in event
+                  ? event.clientX
+                  : event.changedTouches[0].clientX;
+              const clientY =
+                'clientY' in event
+                  ? event.clientY
+                  : event.changedTouches[0].clientY;
+
+              if (
+                clientX < x ||
+                clientX > x + width ||
+                clientY < y ||
+                clientY > y + height
+              ) {
+                return false;
+              }
+              return true;
+            });
+
+          set(
+            getClickOutsideListenerIsMouseDownInsideState,
+            clickedOnAtLeastOneRef,
+          );
+        }
+      },
+    [
+      getClickOutsideListenerIsActivatedState,
+      getClickOutsideListenerMouseDownHappenedState,
+      hotkeyScope,
+      enabled,
+      mode,
+      refs,
+      getClickOutsideListenerIsMouseDownInsideState,
+    ],
+  );
+
+  const handleClickOutside = useRecoilCallback(
+    ({ snapshot }) =>
+      (event: MouseEvent | TouchEvent) => {
+        const clickOutsideListenerIsActivated = snapshot
+          .getLoadable(getClickOutsideListenerIsActivatedState)
+          .getValue();
+
+        const currentHotkeyScopes = snapshot
+          .getLoadable(internalHotkeysEnabledScopesState)
+          .getValue();
+
+        const isListeningBasedOnHotkeyScope = hotkeyScope
+          ? currentHotkeyScopes.includes(hotkeyScope)
+          : true;
+
+        const isListening =
+          clickOutsideListenerIsActivated &&
+          enabled &&
+          isListeningBasedOnHotkeyScope;
+
+        const isMouseDownInside = snapshot
+          .getLoadable(getClickOutsideListenerIsMouseDownInsideState)
+          .getValue();
+
+        const hasMouseDownHappened = snapshot
+          .getLoadable(getClickOutsideListenerMouseDownHappenedState)
+          .getValue();
+
+        if (mode === ClickOutsideMode.compareHTMLRef) {
+          const clickedElement = event.target as HTMLElement;
+          let isClickedOnExcluded = false;
+          let currentElement: HTMLElement | null = clickedElement;
+
+          while (currentElement) {
+            const currentClassList = currentElement.classList;
+
+            isClickedOnExcluded =
+              excludeClassNames?.some((className) =>
+                currentClassList.contains(className),
+              ) ?? false;
+
+            if (isClickedOnExcluded) {
+              break;
+            }
+
+            currentElement = currentElement.parentElement;
+          }
+
+          const clickedOnAtLeastOneRef = refs
+            .filter((ref) => !!ref.current)
+            .some((ref) => ref.current?.contains(event.target as Node));
+
+          if (
+            isListening &&
+            hasMouseDownHappened &&
+            !clickedOnAtLeastOneRef &&
+            !isMouseDownInside &&
+            !isClickedOnExcluded
+          ) {
+            callback(event);
+          }
+        }
+
+        if (mode === ClickOutsideMode.comparePixels) {
+          const clickedOnAtLeastOneRef = refs
+            .filter((ref) => !!ref.current)
+            .some((ref) => {
+              if (!ref.current) {
+                return false;
+              }
+
+              const { x, y, width, height } =
+                ref.current.getBoundingClientRect();
+
+              const clientX =
+                'clientX' in event
+                  ? event.clientX
+                  : event.changedTouches[0].clientX;
+              const clientY =
+                'clientY' in event
+                  ? event.clientY
+                  : event.changedTouches[0].clientY;
+
+              if (
+                clientX < x ||
+                clientX > x + width ||
+                clientY < y ||
+                clientY > y + height
+              ) {
+                return false;
+              }
+              return true;
+            });
+
+          if (
+            !clickedOnAtLeastOneRef &&
+            !isMouseDownInside &&
+            isListening &&
+            hasMouseDownHappened
+          ) {
+            callback(event);
+          }
+        }
+      },
+    [
+      getClickOutsideListenerIsActivatedState,
+      hotkeyScope,
+      enabled,
+      getClickOutsideListenerIsMouseDownInsideState,
+      getClickOutsideListenerMouseDownHappenedState,
+      mode,
+      refs,
+      excludeClassNames,
+      callback,
+    ],
+  );
 
   useEffect(() => {
-    const handleMouseDown = (event: MouseEvent | TouchEvent) => {
+    document.addEventListener('mousedown', handleMouseDown, {
-      if (mode === ClickOutsideMode.compareHTMLRef) {
+      capture: true,
-        const clickedOnAtLeastOneRef = refs
+    });
-          .filter((ref) => !!ref.current)
+    document.addEventListener('click', handleClickOutside, { capture: true });
-          .some((ref) => ref.current?.contains(event.target as Node));
+    document.addEventListener('touchstart', handleMouseDown, {
+      capture: true,
+    });
+    document.addEventListener('touchend', handleClickOutside, {
+      capture: true,
+    });
 
-        setIsMouseDownInside(clickedOnAtLeastOneRef);
+    return () => {
-      }
+      document.removeEventListener('mousedown', handleMouseDown, {
-
+        capture: true,
-      if (mode === ClickOutsideMode.comparePixels) {
+      });
-        const clickedOnAtLeastOneRef = refs
+      document.removeEventListener('click', handleClickOutside, {
-          .filter((ref) => !!ref.current)
+        capture: true,
-          .some((ref) => {
+      });
-            if (!ref.current) {
+      document.removeEventListener('touchstart', handleMouseDown, {
-              return false;
+        capture: true,
-            }
+      });
-
+      document.removeEventListener('touchend', handleClickOutside, {
-            const { x, y, width, height } = ref.current.getBoundingClientRect();
+        capture: true,
-
+      });
-            const clientX =
-              'clientX' in event
-                ? event.clientX
-                : event.changedTouches[0].clientX;
-            const clientY =
-              'clientY' in event
-                ? event.clientY
-                : event.changedTouches[0].clientY;
-
-            if (
-              clientX < x ||
-              clientX > x + width ||
-              clientY < y ||
-              clientY > y + height
-            ) {
-              return false;
-            }
-            return true;
-          });
-
-        setIsMouseDownInside(clickedOnAtLeastOneRef);
-      }
     };
-
+  }, [refs, callback, mode, handleClickOutside, handleMouseDown]);
-    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
-      if (mode === ClickOutsideMode.compareHTMLRef) {
-        const clickedOnAtLeastOneRef = refs
-          .filter((ref) => !!ref.current)
-          .some((ref) => ref.current?.contains(event.target as Node));
-
-        if (!clickedOnAtLeastOneRef && !isMouseDownInside) {
-          callback(event);
-        }
-      }
-
-      if (mode === ClickOutsideMode.comparePixels) {
-        const clickedOnAtLeastOneRef = refs
-          .filter((ref) => !!ref.current)
-          .some((ref) => {
-            if (!ref.current) {
-              return false;
-            }
-
-            const { x, y, width, height } = ref.current.getBoundingClientRect();
-
-            const clientX =
-              'clientX' in event
-                ? event.clientX
-                : event.changedTouches[0].clientX;
-            const clientY =
-              'clientY' in event
-                ? event.clientY
-                : event.changedTouches[0].clientY;
-
-            if (
-              clientX < x ||
-              clientX > x + width ||
-              clientY < y ||
-              clientY > y + height
-            ) {
-              return false;
-            }
-            return true;
-          });
-
-        if (!clickedOnAtLeastOneRef && !isMouseDownInside) {
-          callback(event);
-        }
-      }
-    };
-
-    if (enabled) {
-      document.addEventListener('mousedown', handleMouseDown, {
-        capture: true,
-      });
-      document.addEventListener('click', handleClickOutside, { capture: true });
-      document.addEventListener('touchstart', handleMouseDown, {
-        capture: true,
-      });
-      document.addEventListener('touchend', handleClickOutside, {
-        capture: true,
-      });
-
-      return () => {
-        document.removeEventListener('mousedown', handleMouseDown, {
-          capture: true,
-        });
-        document.removeEventListener('click', handleClickOutside, {
-          capture: true,
-        });
-        document.removeEventListener('touchstart', handleMouseDown, {
-          capture: true,
-        });
-        document.removeEventListener('touchend', handleClickOutside, {
-          capture: true,
-        });
-      };
-    }
-  }, [refs, callback, mode, enabled, isMouseDownInside]);
 };

packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutsideV2.ts

@@ -1,266 +0,0 @@
-import React, { useEffect } from 'react';
-import { useRecoilCallback } from 'recoil';
-
-import { internalHotkeysEnabledScopesState } from '@/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState';
-import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
-
-export enum ClickOutsideMode {
-  comparePixels = 'comparePixels',
-  compareHTMLRef = 'compareHTMLRef',
-}
-
-export type ClickOutsideListenerProps<T extends Element> = {
-  refs: Array<React.RefObject<T>>;
-  excludeClassNames?: string[];
-  callback: (event: MouseEvent | TouchEvent) => void;
-  mode?: ClickOutsideMode;
-  listenerId: string;
-  hotkeyScope?: string;
-  enabled?: boolean;
-};
-
-export const useListenClickOutsideV2 = <T extends Element>({
-  refs,
-  excludeClassNames,
-  callback,
-  mode = ClickOutsideMode.compareHTMLRef,
-  listenerId,
-  hotkeyScope,
-  enabled = true,
-}: ClickOutsideListenerProps<T>) => {
-  const {
-    getClickOutsideListenerIsMouseDownInsideState,
-    getClickOutsideListenerIsActivatedState,
-    getClickOutsideListenerMouseDownHappenedState,
-  } = useClickOustideListenerStates(listenerId);
-
-  const handleMouseDown = useRecoilCallback(
-    ({ snapshot, set }) =>
-      (event: MouseEvent | TouchEvent) => {
-        const clickOutsideListenerIsActivated = snapshot
-          .getLoadable(getClickOutsideListenerIsActivatedState)
-          .getValue();
-
-        set(getClickOutsideListenerMouseDownHappenedState, true);
-
-        const currentHotkeyScopes = snapshot
-          .getLoadable(internalHotkeysEnabledScopesState)
-          .getValue();
-
-        const isListeningBasedOnHotkeyScope = hotkeyScope
-          ? currentHotkeyScopes.includes(hotkeyScope)
-          : true;
-
-        const isListening =
-          clickOutsideListenerIsActivated &&
-          enabled &&
-          isListeningBasedOnHotkeyScope;
-
-        if (!isListening) {
-          return;
-        }
-
-        if (mode === ClickOutsideMode.compareHTMLRef) {
-          const clickedOnAtLeastOneRef = refs
-            .filter((ref) => !!ref.current)
-            .some((ref) => ref.current?.contains(event.target as Node));
-
-          set(
-            getClickOutsideListenerIsMouseDownInsideState,
-            clickedOnAtLeastOneRef,
-          );
-        }
-
-        if (mode === ClickOutsideMode.comparePixels) {
-          const clickedOnAtLeastOneRef = refs
-            .filter((ref) => !!ref.current)
-            .some((ref) => {
-              if (!ref.current) {
-                return false;
-              }
-
-              const { x, y, width, height } =
-                ref.current.getBoundingClientRect();
-
-              const clientX =
-                'clientX' in event
-                  ? event.clientX
-                  : event.changedTouches[0].clientX;
-              const clientY =
-                'clientY' in event
-                  ? event.clientY
-                  : event.changedTouches[0].clientY;
-
-              if (
-                clientX < x ||
-                clientX > x + width ||
-                clientY < y ||
-                clientY > y + height
-              ) {
-                return false;
-              }
-              return true;
-            });
-
-          set(
-            getClickOutsideListenerIsMouseDownInsideState,
-            clickedOnAtLeastOneRef,
-          );
-        }
-      },
-    [
-      getClickOutsideListenerIsActivatedState,
-      getClickOutsideListenerMouseDownHappenedState,
-      hotkeyScope,
-      enabled,
-      mode,
-      refs,
-      getClickOutsideListenerIsMouseDownInsideState,
-    ],
-  );
-
-  const handleClickOutside = useRecoilCallback(
-    ({ snapshot }) =>
-      (event: MouseEvent | TouchEvent) => {
-        const clickOutsideListenerIsActivated = snapshot
-          .getLoadable(getClickOutsideListenerIsActivatedState)
-          .getValue();
-
-        const currentHotkeyScopes = snapshot
-          .getLoadable(internalHotkeysEnabledScopesState)
-          .getValue();
-
-        const isListeningBasedOnHotkeyScope = hotkeyScope
-          ? currentHotkeyScopes.includes(hotkeyScope)
-          : true;
-
-        const isListening =
-          clickOutsideListenerIsActivated &&
-          enabled &&
-          isListeningBasedOnHotkeyScope;
-
-        const isMouseDownInside = snapshot
-          .getLoadable(getClickOutsideListenerIsMouseDownInsideState)
-          .getValue();
-
-        const hasMouseDownHappened = snapshot
-          .getLoadable(getClickOutsideListenerMouseDownHappenedState)
-          .getValue();
-
-        if (mode === ClickOutsideMode.compareHTMLRef) {
-          const clickedElement = event.target as HTMLElement;
-          let isClickedOnExcluded = false;
-          let currentElement: HTMLElement | null = clickedElement;
-
-          while (currentElement) {
-            const currentClassList = currentElement.classList;
-
-            isClickedOnExcluded =
-              excludeClassNames?.some((className) =>
-                currentClassList.contains(className),
-              ) ?? false;
-
-            if (isClickedOnExcluded) {
-              break;
-            }
-
-            currentElement = currentElement.parentElement;
-          }
-
-          const clickedOnAtLeastOneRef = refs
-            .filter((ref) => !!ref.current)
-            .some((ref) => ref.current?.contains(event.target as Node));
-
-          if (
-            isListening &&
-            hasMouseDownHappened &&
-            !clickedOnAtLeastOneRef &&
-            !isMouseDownInside &&
-            !isClickedOnExcluded
-          ) {
-            callback(event);
-          }
-        }
-
-        if (mode === ClickOutsideMode.comparePixels) {
-          const clickedOnAtLeastOneRef = refs
-            .filter((ref) => !!ref.current)
-            .some((ref) => {
-              if (!ref.current) {
-                return false;
-              }
-
-              const { x, y, width, height } =
-                ref.current.getBoundingClientRect();
-
-              const clientX =
-                'clientX' in event
-                  ? event.clientX
-                  : event.changedTouches[0].clientX;
-              const clientY =
-                'clientY' in event
-                  ? event.clientY
-                  : event.changedTouches[0].clientY;
-
-              if (
-                clientX < x ||
-                clientX > x + width ||
-                clientY < y ||
-                clientY > y + height
-              ) {
-                return false;
-              }
-              return true;
-            });
-
-          if (
-            !clickedOnAtLeastOneRef &&
-            !isMouseDownInside &&
-            isListening &&
-            hasMouseDownHappened
-          ) {
-            callback(event);
-          }
-        }
-      },
-    [
-      getClickOutsideListenerIsActivatedState,
-      hotkeyScope,
-      enabled,
-      getClickOutsideListenerIsMouseDownInsideState,
-      getClickOutsideListenerMouseDownHappenedState,
-      mode,
-      refs,
-      excludeClassNames,
-      callback,
-    ],
-  );
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleMouseDown, {
-      capture: true,
-    });
-    document.addEventListener('click', handleClickOutside, { capture: true });
-    document.addEventListener('touchstart', handleMouseDown, {
-      capture: true,
-    });
-    document.addEventListener('touchend', handleClickOutside, {
-      capture: true,
-    });
-
-    return () => {
-      document.removeEventListener('mousedown', handleMouseDown, {
-        capture: true,
-      });
-      document.removeEventListener('click', handleClickOutside, {
-        capture: true,
-      });
-      document.removeEventListener('touchstart', handleMouseDown, {
-        capture: true,
-      });
-      document.removeEventListener('touchend', handleClickOutside, {
-        capture: true,
-      });
-    };
-  }, [refs, callback, mode, handleClickOutside, handleMouseDown]);
-};

packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx

@@ -3,7 +3,7 @@ import {
   OnDragEndResponder,
   ResponderProvided,
 } from '@hello-pangea/dnd';
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import { createPortal } from 'react-dom';
 import {
   AppTooltip,
@@ -20,7 +20,6 @@ import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableIt
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { StyledDropdownMenuSubheader } from '@/ui/layout/dropdown/components/StyledDropdownMenuSubheader';
-import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { groupArrayItemsBy } from '~/utils/array/groupArrayItemsBy';
 import { isDefined } from '~/utils/isDefined';
 
@@ -80,15 +79,6 @@ export const ViewFieldsVisibilityDropdownSection = ({
     return iconButtons.length ? iconButtons : undefined;
   };
 
-  const ref = useRef<HTMLDivElement>(null);
-
-  useListenClickOutside({
-    refs: [ref],
-    callback: () => {
-      setOpenToolTipIndex(undefined);
-    },
-  });
-
   const { nonDraggableItems = [], draggableItems = [] } = isDraggable
     ? groupArrayItemsBy(fields, ({ isLabelIdentifier }) =>
         isLabelIdentifier ? 'nonDraggableItems' : 'draggableItems',
@@ -96,7 +86,7 @@ export const ViewFieldsVisibilityDropdownSection = ({
     : { nonDraggableItems: fields, draggableItems: [] };
 
   return (
-    <div ref={ref}>
+    <>
       {showSubheader && (
         <StyledDropdownMenuSubheader>{title}</StyledDropdownMenuSubheader>
       )}
@@ -158,6 +148,6 @@ export const ViewFieldsVisibilityDropdownSection = ({
           />,
           document.body,
         )}
-    </div>
+    </>
   );
 };

packages/twenty-ui/src/testing/index.ts

@@ -5,3 +5,4 @@ export * from './decorators/ComponentWithRouterDecorator';
 export * from './decorators/RouterDecorator';
 export * from './mocks/avatarUrlMock';
 export * from './types/CatalogStory';
+export * from './utils/getCanvasElementForDropdownTesting';

packages/twenty-ui/src/testing/utils/getCanvasElementForDropdownTesting.ts

@@ -0,0 +1,15 @@
+import { isDefined } from '@ui/utilities';
+
+export const getCanvasElementForDropdownTesting = () => {
+  const canvasElement = document.getElementsByClassName(
+    'sb-show-main',
+  )[0] as HTMLElement | null;
+
+  if (!isDefined(canvasElement)) {
+    throw new Error(
+      `Canvas element not found for dropdown testing in storybook, verify that storybook still uses the class name "sb-show-main" for its body that displays stories.`,
+    );
+  }
+
+  return canvasElement;
+};