Replaced useDropdown calls by useCloseDropdown, useOpenDropdown and useToggleDropdown (#12958)

This PR replaces the many calls of useDropdown by the new standalone
hooks : useCloseDropdown, useOpenDropdown and useToggleDropdown.

This will allow to remove useDropdown and then the dropdown recoil
component state v1.

A big round of QA has been made, with some bugs caught along the way.

Closes https://github.com/twentyhq/core-team-issues/issues/1155
Closes https://github.com/twentyhq/core-team-issues/issues/618

## QA

Component|Status|Comment
|---|---|---|
CurrentWorkspaceMemberFavorites|Ok|
FavoriteFolderPickerFooter|Ok|
AdvancedFilterAddFilterRuleSelect|Ok|
AdvancedFilterRecordFilterGroupOptionsDropdown|Ok|
AdvancedFilterRecordFilterOperandSelectContent|Ok|
AdvancedFilterRecordFilterOptionsDropdown|Ok|
useAdvancedFilterFieldSelectDropdown|Ok|
ObjectFilterDropdownBooleanSelect|Ok|
ObjectFilterDropdownOptionSelect|Ok|
ObjectOptionsDropdown|Ok|
ObjectOptionsDropdownLayoutContent|Ok|
ObjectSortDropdownButton|Ok|
useCloseSortDropdown|Ok|
FormDateTimeFieldInput|Ok|Bug detected, cannot select a month or a year,
see issue https://github.com/twentyhq/twenty/issues/12922
FormSingleRecordPicker|Ok|
MultiItemFieldMenuItem|Ok|
RecordDetailRelationRecordsListItem|Ok|
RecordDetailRelationSection|Ok|
RecordDetailRelationSectionDropdownToMany|Ok|
RecordDetailRelationSectionDropdownToOne|Ok|
RecordTableColumnAggregateFooterDropdownSubmenuContent|Ok|
RecordTableColumnAggregateFooterAggregateOperationMenuItems|Ok|
RecordTableColumnAggregateFooterMenuContent|Ok|
RecordTableColumnAggregateFooterValueCell|Ok|
RecordTableColumnHeadDropdownMenu|Ok|
RecordTableHeaderPlusButtonContent|Ok|
useTriggerActionMenuDropdown|Ok|
MultipleSelectDropdown|Ok|
RecordBoardColumnHeaderAggregateDropdownButton|Ok|
SettingsDataModelFieldSelectFormOptionRow|Ok|
SettingsDataModelNewFieldBreadcrumbDropDown|Ok|
SettingsObjectFieldActiveActionDropdown|Ok|
SettingsObjectFieldInactiveActionDropdown|Ok|
SettingsObjectInactiveMenuDropDown|Ok|
SettingsSecurityApprovedAccessDomainRowDropdownMenu|Couldn’t test|
SettingsSecuritySSORowDropdownMenu|Couldn’t test|
SettingsAccountsRowDropdownMenu|Ok|
SettingsRoleAssignment|Ok|
SettingsServerlessFunctionTabEnvironmentVariableTableRow|Couldn’t test|
MatchColumnToFieldSelect|Ok|
SubMatchingSelectDropdownButton|Ok|Removed conflicting duplicate open
dropdown
SubMatchingSelectRowRightDropdown|Ok|
CurrencyPickerDropdownButton|Ok|
IconPicker|Ok|
DateTimePicker|Ok|
PhoneCountryPickerDropdownButton|OK|
Select|Ok|
Dropdown|Ok|Not QAing all dropdowns in the app because the ones of this
QA are enough to show up that Dropdown is behaving correctly on a lot of
use cases
DropdownMenuInnerSelect|Ok|
TabList|Ok|Removed onClickOutside called in dropdown clickable
component, validated with Raph who recently worked on this
DateInput|Ok|
MultiWorkspaceDropdownDefaultComponents|Ok|
AdvancedFilterChip|Ok|
EditableFilterDropdownButton|Ok|
UpdateViewButtonGroup|Ok|
ViewBarDetailsAddFilterButton|Ok|
ViewBarFilterButton|Ok|
ViewBarFilterDropdown|Ok|
ViewBarFilterDropdownAdvancedFilterButton|Ok|
ViewPickerDropdown|Ok|
ViewPickerListContent|Ok|
ViewPickerOptionDropdown|Ok|
WorkflowEditTriggerDatabaseEventForm|Ok|
WorkflowVariablesDropdownWorkflowStepItems|Ok|
AttachmentDropdown|Ok|
SupportDropdown|Ok|

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx

@@ -2,7 +2,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import {
   IconDotsVertical,
   IconDownload,
@@ -27,21 +27,21 @@ export const AttachmentDropdown = ({
 }: AttachmentDropdownProps) => {
   const dropdownId = `${scopeKey}-settings-field-active-action-dropdown`;
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const handleDownload = () => {
     onDownload();
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   const handleDelete = () => {
     onDelete();
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   const handleRename = () => {
     onRename();
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   return (

packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx

@@ -10,7 +10,8 @@ import { openFavoriteFolderIdsState } from '@/favorites/states/openFavoriteFolde
 import { isLocationMatchingFavorite } from '@/favorites/utils/isLocationMatchingFavorite';
 import { ProcessedFavorite } from '@/favorites/utils/sortFavorites';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
+import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
 import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpenedComponentState';
@@ -28,6 +29,7 @@ import { useRecoilState } from 'recoil';
 import { IconFolder, IconFolderOpen, IconHeartOff } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
 import { AnimatedExpandableContainer } from 'twenty-ui/layout';
+
 type CurrentWorkspaceMemberFavoritesProps = {
   folder: {
     folderId: string;
@@ -68,10 +70,16 @@ export const CurrentWorkspaceMemberFavorites = ({
 
   const { renameFavoriteFolder } = useRenameFavoriteFolder();
   const { deleteFavoriteFolder } = useDeleteFavoriteFolder();
-  const {
+
-    closeDropdown: closeFavoriteFolderEditDropdown,
+  const dropdownId = `favorite-folder-edit-${folder.folderId}`;
-    isDropdownOpen: isFavoriteFolderEditDropdownOpen,
+
-  } = useDropdown(`favorite-folder-edit-${folder.folderId}`);
+  const isDropdownOpenComponent = useRecoilComponentValueV2(
+    isDropdownOpenComponentStateV2,
+    dropdownId,
+  );
+
+  const { closeDropdown } = useCloseDropdown();
+
   const selectedFavoriteIndex = folder.favorites.findIndex((favorite) =>
     isLocationMatchingFavorite(currentPath, currentViewPath, favorite),
   );
@@ -110,10 +118,10 @@ export const CurrentWorkspaceMemberFavorites = ({
   const handleFavoriteFolderDelete = async () => {
     if (folder.favorites.length > 0) {
       openModal(modalId);
-      closeFavoriteFolderEditDropdown();
+      closeDropdown(dropdownId);
     } else {
       await deleteFavoriteFolder(folder.folderId);
-      closeFavoriteFolderEditDropdown();
+      closeDropdown(dropdownId);
     }
   };
 
@@ -126,7 +134,9 @@ export const CurrentWorkspaceMemberFavorites = ({
       folderId={folder.folderId}
       onRename={() => setIsFavoriteFolderRenaming(true)}
       onDelete={handleFavoriteFolderDelete}
-      closeDropdown={closeFavoriteFolderEditDropdown}
+      closeDropdown={() => {
+        closeDropdown(dropdownId);
+      }}
     />
   );
 
@@ -159,7 +169,7 @@ export const CurrentWorkspaceMemberFavorites = ({
               onClick={handleToggle}
               rightOptions={rightOptions}
               className="navigation-drawer-item"
-              isRightOptionsDropdownOpen={isFavoriteFolderEditDropdownOpen}
+              isRightOptionsDropdownOpen={isDropdownOpenComponent}
               triggerEvent="CLICK"
             />
           </FavoritesDroppable>

packages/twenty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPickerFooter.tsx

@@ -1,6 +1,6 @@
 import { isFavoriteFolderCreatingState } from '@/favorites/states/isFavoriteFolderCreatingState';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { useTheme } from '@emotion/react';
@@ -21,7 +21,7 @@ export const FavoriteFolderPickerFooter = ({
   );
   const { openNavigationSection } = useNavigationSection('Favorites');
   const theme = useTheme();
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   return (
     <DropdownMenuItemsContainer scrollable={false}>
@@ -31,7 +31,7 @@ export const FavoriteFolderPickerFooter = ({
           setIsNavigationDrawerExpanded(true);
           openNavigationSection();
           setIsFavoriteFolderCreating(true);
-          closeDropdown();
+          closeDropdown(dropdownId);
         }}
         text="Add folder"
         LeftIcon={() => <IconPlus size={theme.icon.size.md} />}

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterAddFilterRuleSelect.tsx

@@ -14,7 +14,7 @@ import { getRecordFilterOperands } from '@/object-record/record-filter/utils/get
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
 import { isDefined } from 'twenty-shared/utils';
 import { IconLibraryPlus, IconPlus } from 'twenty-ui/display';
@@ -44,7 +44,7 @@ export const AdvancedFilterAddFilterRuleSelect = ({
 
   const newPositionInRecordFilterGroup = lastChildPosition + 1;
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const { defaultFieldMetadataItemForFilter } =
     useDefaultFieldMetadataItemForFilter();
@@ -57,7 +57,7 @@ export const AdvancedFilterAddFilterRuleSelect = ({
       throw new Error('Missing default field metadata item for filter');
     }
 
-    closeDropdown();
+    closeDropdown(dropdownId);
 
     const filterType = getFilterTypeFromFieldType(
       defaultFieldMetadataItemForFilter.type,
@@ -87,7 +87,7 @@ export const AdvancedFilterAddFilterRuleSelect = ({
   };
 
   const handleAddFilterGroup = () => {
-    closeDropdown();
+    closeDropdown(dropdownId);
 
     if (!isDefined(defaultFieldMetadataItemForFilter)) {
       throw new Error('Missing default field metadata item for filter');

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown.tsx

@@ -6,7 +6,7 @@ import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRe
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { IconDotsVertical, IconTrash } from 'twenty-ui/display';
 import { IconButton } from 'twenty-ui/input';
 import { MenuItem } from 'twenty-ui/navigation';
@@ -20,7 +20,7 @@ export const AdvancedFilterRecordFilterGroupOptionsDropdown = ({
 }: AdvancedFilterRecordFilterGroupOptionsDropdownProps) => {
   const dropdownId = `advanced-filter-record-filter-group-options-${recordFilterGroupId}`;
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const { removeRecordFilter } = useRemoveRecordFilter();
   const { removeRecordFilterGroup } = useRemoveRecordFilterGroup();
@@ -40,7 +40,7 @@ export const AdvancedFilterRecordFilterGroupOptionsDropdown = ({
 
     removeRootRecordFilterGroupIfEmpty();
 
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   return (

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelectContent.tsx

@@ -10,7 +10,7 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
 import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
@@ -31,13 +31,13 @@ export const AdvancedFilterRecordFilterOperandSelectContent = ({
 }: AdvancedFilterRecordFilterOperandSelectContentProps) => {
   const dropdownId = `advanced-filter-view-filter-operand-${recordFilterId}`;
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const { applyObjectFilterDropdownOperand } =
     useApplyObjectFilterDropdownOperand();
 
   const handleOperandChange = (operand: ViewFilterOperand) => {
-    closeDropdown();
+    closeDropdown(dropdownId);
 
     applyObjectFilterDropdownOperand(operand);
   };

packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown.tsx

@@ -9,7 +9,7 @@ import { DEFAULT_ADVANCED_FILTER_DROPDOWN_OFFSET } from '@/object-record/advance
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { isDefined } from 'twenty-shared/utils';
 import { IconDotsVertical, IconTrash } from 'twenty-ui/display';
@@ -25,7 +25,7 @@ export const AdvancedFilterRecordFilterOptionsDropdown = ({
 }: AdvancedFilterRecordFilterOptionsDropdownProps) => {
   const dropdownId = `advanced-filter-record-filter-options-${recordFilterId}`;
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const { removeRecordFilter } = useRemoveRecordFilter();
   const { removeRecordFilterGroup } = useRemoveRecordFilterGroup();
@@ -47,7 +47,7 @@ export const AdvancedFilterRecordFilterOptionsDropdown = ({
     useRemoveRootRecordFilterGroupIfEmpty();
 
   const handleRemove = async () => {
-    closeDropdown();
+    closeDropdown(dropdownId);
 
     if (isDefined(currentRecordFilter?.recordFilterGroupId)) {
       const isOnlyViewFilterInGroup =

packages/twenty-front/src/modules/object-record/advanced-filter/hooks/useAdvancedFilterFieldSelectDropdown.ts

@@ -1,11 +1,13 @@
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 
 export const useAdvancedFilterFieldSelectDropdown = (viewFilterId?: string) => {
   const advancedFilterFieldSelectDropdownId = `advanced-filter-view-filter-field-${viewFilterId}`;
 
-  const { closeDropdown: closeAdvancedFilterFieldSelectDropdown } = useDropdown(
+  const { closeDropdown } = useCloseDropdown();
-    advancedFilterFieldSelectDropdownId,
+
-  );
+  const closeAdvancedFilterFieldSelectDropdown = () => {
+    closeDropdown(advancedFilterFieldSelectDropdownId);
+  };
 
   return {
     closeAdvancedFilterFieldSelectDropdown,

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

@@ -8,7 +8,7 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
 import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { IconCheck } from 'twenty-ui/display';
 
@@ -41,7 +41,7 @@ export const ObjectFilterDropdownBooleanSelect = () => {
   const { applyObjectFilterDropdownFilterValue } =
     useApplyObjectFilterDropdownFilterValue();
 
-  const { closeDropdown } = useDropdown();
+  const { closeDropdown } = useCloseDropdown();
 
   const handleOptionSelect = (newValue: boolean) => {
     applyObjectFilterDropdownFilterValue(

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

@@ -1,53 +0,0 @@
-import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
-
-import { ObjectFilterDropdownOperandSelect } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect';
-import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
-
-import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
-import { IconChevronDown } from 'twenty-ui/display';
-import { getOperandLabel } from '../utils/getOperandLabel';
-
-const StyledDropdownMenuHeader = styled(DropdownMenuHeader)`
-  cursor: pointer;
-`;
-
-export const OPERAND_DROPDOWN_CLICK_OUTSIDE_ID =
-  'object-filter-dropdown-operand-dropdown-click-outside-id';
-
-export const ObjectFilterDropdownOperandDropdown = ({
-  filterDropdownId,
-}: {
-  filterDropdownId?: string;
-}) => {
-  const selectedOperandInDropdown = useRecoilComponentValueV2(
-    selectedOperandInDropdownComponentState,
-  );
-
-  const theme = useTheme();
-
-  const dropdownId = `${filterDropdownId}-operand-dropdown`;
-
-  return (
-    <ClickOutsideListenerContext.Provider
-      value={{ excludedClickOutsideId: OPERAND_DROPDOWN_CLICK_OUTSIDE_ID }}
-    >
-      <Dropdown
-        dropdownId={dropdownId}
-        clickableComponent={
-          <StyledDropdownMenuHeader
-            key={'selected-filter-operand'}
-            EndComponent={<IconChevronDown />}
-          >
-            {getOperandLabel(selectedOperandInDropdown)}
-          </StyledDropdownMenuHeader>
-        }
-        dropdownComponents={<ObjectFilterDropdownOperandSelect />}
-        dropdownOffset={{ x: parseInt(theme.spacing(2), 10) }}
-      />
-    </ClickOutsideListenerContext.Provider>
-  );
-};

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

@@ -1,65 +0,0 @@
-import { getFilterTypeFromFieldType } from '@/object-metadata/utils/formatFieldMetadataItemsAsFilterDefinitions';
-import { useApplyObjectFilterDropdownOperand } from '@/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownOperand';
-import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector';
-import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/subFieldNameUsedInDropdownComponentState';
-import { getRecordFilterOperands } from '@/object-record/record-filter/utils/getRecordFilterOperands';
-import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
-import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
-import styled from '@emotion/styled';
-import { isDefined } from 'twenty-shared/utils';
-import { MenuItem } from 'twenty-ui/navigation';
-import { getOperandLabel } from '../utils/getOperandLabel';
-
-const StyledDropdownMenuItemsContainer = styled(DropdownMenuItemsContainer)`
-  background-color: ${({ theme }) => theme.background.primary};
-  border-radius: ${({ theme }) => theme.border.radius.md};
-`;
-
-export const ObjectFilterDropdownOperandSelect = () => {
-  const fieldMetadataItemUsedInDropdown = useRecoilComponentValueV2(
-    fieldMetadataItemUsedInDropdownComponentSelector,
-  );
-
-  const subFieldNameUsedInDropdown = useRecoilComponentValueV2(
-    subFieldNameUsedInDropdownComponentState,
-  );
-
-  const { applyObjectFilterDropdownOperand } =
-    useApplyObjectFilterDropdownOperand();
-
-  const { closeDropdown } = useDropdown();
-
-  const operandsForFilterType = isDefined(fieldMetadataItemUsedInDropdown)
-    ? getRecordFilterOperands({
-        filterType: getFilterTypeFromFieldType(
-          fieldMetadataItemUsedInDropdown.type,
-        ),
-        subFieldName: subFieldNameUsedInDropdown,
-      })
-    : [];
-
-  const handleOperandChange = (newOperand: ViewFilterOperand) => {
-    applyObjectFilterDropdownOperand(newOperand);
-  };
-
-  return (
-    <DropdownContent widthInPixels={GenericDropdownContentWidth.ExtraLarge}>
-      <StyledDropdownMenuItemsContainer>
-        {operandsForFilterType.map((filterOperand, index) => (
-          <MenuItem
-            key={`select-filter-operand-${index}`}
-            onClick={() => {
-              handleOperandChange(filterOperand);
-              closeDropdown();
-            }}
-            text={getOperandLabel(filterOperand)}
-          />
-        ))}
-      </StyledDropdownMenuItemsContainer>
-    </DropdownContent>
-  );
-};

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

@@ -4,7 +4,6 @@ import { Key } from 'ts-key-enum';
 import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem';
 import { useOptionsForSelect } from '@/object-record/object-filter-dropdown/hooks/useOptionsForSelect';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
@@ -15,6 +14,7 @@ import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-recor
 import { objectFilterDropdownCurrentRecordFilterComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownCurrentRecordFilterComponentState';
 import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
 import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
@@ -64,7 +64,7 @@ export const ObjectFilterDropdownOptionSelect = ({
     [objectFilterDropdownCurrentRecordFilter?.value],
   );
 
-  const { closeDropdown } = useDropdown();
+  const { closeDropdown } = useCloseDropdown();
 
   const { resetSelectedItem } = useSelectableList(componentInstanceId);
 

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

@@ -9,7 +9,8 @@ import { useRecordGroupReorderConfirmationModal } from '@/object-record/record-g
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
 import { DROPDOWN_OFFSET_Y } from '@/ui/layout/dropdown/constants/DropdownOffsetY';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ViewType } from '@/views/types/ViewType';
 import { Trans } from '@lingui/react/macro';
 
@@ -27,7 +28,11 @@ export const ObjectOptionsDropdown = ({
   const { currentContentId, handleContentChange, handleResetContent } =
     useDropdownContextCurrentContentId<ObjectOptionsContentId>();
 
-  const { isDropdownOpen } = useDropdown(OBJECT_OPTIONS_DROPDOWN_ID);
+  const isDropdownOpen = useRecoilComponentValueV2(
+    isDropdownOpenComponentStateV2,
+    OBJECT_OPTIONS_DROPDOWN_ID,
+  );
+
   const {
     handleRecordGroupOrderChangeWithModal,
     handleRecordGroupReorderConfirmClick,

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

@@ -10,7 +10,7 @@ import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
@@ -62,7 +62,7 @@ export const ObjectOptionsDropdownLayoutContent = () => {
   const { availableFieldsForKanban, navigateToSelectSettings } =
     useGetAvailableFieldsForKanban();
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const handleSelectKanbanViewType = async () => {
     if (isDefaultView) {
@@ -70,7 +70,7 @@ export const ObjectOptionsDropdownLayoutContent = () => {
     }
     if (availableFieldsForKanban.length === 0) {
       navigateToSelectSettings();
-      closeDropdown();
+      closeDropdown(dropdownId);
     }
     if (currentView?.type !== ViewType.Kanban) {
       await setAndPersistViewType(ViewType.Kanban);

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

@@ -26,7 +26,7 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
 import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
 import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
 import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
@@ -194,7 +194,10 @@ export const ObjectSortDropdownButton = () => {
     setIsRecordSortDirectionMenuUnfolded(false);
   };
 
-  const { isDropdownOpen } = useDropdown(OBJECT_SORT_DROPDOWN_ID);
+  const isDropdownOpen = useRecoilComponentValueV2(
+    isDropdownOpenComponentStateV2,
+    OBJECT_SORT_DROPDOWN_ID,
+  );
 
   const { t } = useLingui();
 

packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useCloseSortDropdown.ts

@@ -1,14 +1,14 @@
 import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId';
 import { useResetSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useResetSortDropdown';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 
 export const useCloseSortDropdown = () => {
   const { resetSortDropdown } = useResetSortDropdown();
 
-  const { closeDropdown } = useDropdown(OBJECT_SORT_DROPDOWN_ID);
+  const { closeDropdown } = useCloseDropdown();
 
   const closeSortDropdown = () => {
-    closeDropdown();
+    closeDropdown(OBJECT_SORT_DROPDOWN_ID);
     resetSortDropdown();
   };
 

packages/twenty-front/src/modules/object-record/object-sort-dropdown/hooks/useToggleSortDropdown.ts

@@ -1,18 +0,0 @@
-import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId';
-import { useResetSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useResetSortDropdown';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-
-export const useToggleSortDropdown = () => {
-  const { toggleDropdown } = useDropdown(OBJECT_SORT_DROPDOWN_ID);
-
-  const { resetSortDropdown } = useResetSortDropdown();
-
-  const toggleSortDropdown = () => {
-    toggleDropdown();
-    resetSortDropdown();
-  };
-
-  return {
-    toggleSortDropdown,
-  };
-};

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

@@ -1,8 +1,9 @@
 import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import styled from '@emotion/styled';
-import { AppTooltip, TooltipDelay } from 'twenty-ui/display';
 import { Tag } from 'twenty-ui/components';
+import { AppTooltip, TooltipDelay } from 'twenty-ui/display';
 
 const StyledTag = styled(Tag)`
   width: 100%;
@@ -21,7 +22,10 @@ export const RecordBoardColumnHeaderAggregateDropdownButton = ({
   value?: string | number;
   tooltip?: string;
 }) => {
-  const { isDropdownOpen } = useDropdown(dropdownId);
+  const isDropdownOpen = useRecoilComponentValueV2(
+    isDropdownOpenComponentStateV2,
+    dropdownId,
+  );
 
   return (
     <StyledHeader id={dropdownId} isUnfolded={isDropdownOpen}>

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

@@ -12,7 +12,7 @@ import {
 import { MAX_DATE } from '@/ui/input/components/internal/date/constants/MaxDate';
 import { MIN_DATE } from '@/ui/input/components/internal/date/constants/MinDate';
 import { useDateParser } from '@/ui/input/components/internal/hooks/useDateParser';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
@@ -129,12 +129,8 @@ export const FormDateTimeFieldInput = ({
     }
   };
 
-  const { closeDropdown: closeDropdownMonthSelect } = useDropdown(
+  const { closeDropdown: closeDropdownMonthSelect } = useCloseDropdown();
-    MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
+  const { closeDropdown: closeDropdownYearSelect } = useCloseDropdown();
-  );
-  const { closeDropdown: closeDropdownYearSelect } = useDropdown(
-    MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
-  );
 
   const displayDatePicker =
     draftValue.type === 'static' && draftValue.mode === 'edit';
@@ -148,8 +144,8 @@ export const FormDateTimeFieldInput = ({
     callback: (event) => {
       event.stopImmediatePropagation();
 
-      closeDropdownYearSelect();
+      closeDropdownYearSelect(MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID);
-      closeDropdownMonthSelect();
+      closeDropdownMonthSelect(MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID);
       handlePickerClickOutside();
     },
     enabled: displayDatePicker,

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

@@ -11,7 +11,7 @@ import { SingleRecordPickerRecord } from '@/object-record/record-picker/single-r
 import { InputLabel } from '@/ui/input/components/InputLabel';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
 import { css, useTheme } from '@emotion/react';
@@ -103,7 +103,7 @@ export const FormSingleRecordPicker = ({
   const dropdownId = `form-record-picker-${componentId}`;
   const variablesDropdownId = `form-record-picker-${componentId}-variables`;
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const setRecordPickerSearchFilter = useSetRecoilComponentStateV2(
     singleRecordPickerSearchFilterComponentState,
@@ -118,7 +118,7 @@ export const FormSingleRecordPicker = ({
     selectedEntity: SingleRecordPickerRecord | null | undefined,
   ) => {
     onChange?.(selectedEntity?.record?.id ?? '');
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   const handleVariableTagInsert = (variable: string) => {
@@ -193,7 +193,7 @@ export const FormSingleRecordPicker = ({
                 componentInstanceId={dropdownId}
                 EmptyIcon={IconForbid}
                 emptyLabel={'No ' + objectNameSingular}
-                onCancel={() => closeDropdown()}
+                onCancel={() => closeDropdown(dropdownId)}
                 onRecordSelected={handleRecordSelected}
                 objectNameSingular={objectNameSingular}
                 recordPickerInstanceId={dropdownId}

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

@@ -1,7 +1,9 @@
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
+import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { MenuItemWithOptionDropdown } from '@/ui/navigation/menu-item/components/MenuItemWithOptionDropdown';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import React, { useState } from 'react';
 import {
   IconBookmark,
@@ -33,7 +35,11 @@ export const MultiItemFieldMenuItem = <T,>({
   showSetAsPrimaryButton,
 }: MultiItemFieldMenuItemProps<T>) => {
   const [isHovered, setIsHovered] = useState(false);
-  const { isDropdownOpen, closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
+  const isDropdownOpen = useRecoilComponentValueV2(
+    isDropdownOpenComponentStateV2,
+    dropdownId,
+  );
 
   const handleMouseEnter = () => setIsHovered(true);
   const handleMouseLeave = () => {
@@ -44,7 +50,7 @@ export const MultiItemFieldMenuItem = <T,>({
     event.stopPropagation();
     event.preventDefault();
 
-    closeDropdown();
+    closeDropdown(dropdownId);
     setIsHovered(false);
     onDelete?.();
   };
@@ -53,7 +59,7 @@ export const MultiItemFieldMenuItem = <T,>({
     event.stopPropagation();
     event.preventDefault();
 
-    closeDropdown();
+    closeDropdown(dropdownId);
     onSetAsPrimary?.();
   };
 
@@ -61,7 +67,7 @@ export const MultiItemFieldMenuItem = <T,>({
     event.stopPropagation();
     event.preventDefault();
 
-    closeDropdown();
+    closeDropdown(dropdownId);
     onEdit?.();
   };
 

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

@@ -34,10 +34,12 @@ import { isFieldCellSupported } from '@/object-record/utils/isFieldCellSupported
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
+import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { createPortal } from 'react-dom';
 import {
@@ -159,7 +161,11 @@ export const RecordDetailRelationRecordsListItem = ({
 
   const dropdownScopeId = `record-field-card-menu-${relationFieldMetadataId}-${relationRecord.id}`;
 
-  const { closeDropdown, isDropdownOpen } = useDropdown(dropdownScopeId);
+  const { closeDropdown } = useCloseDropdown();
+  const isDropdownOpen = useRecoilComponentValueV2(
+    isDropdownOpenComponentStateV2,
+    dropdownScopeId,
+  );
 
   const dropdownId = getRecordFieldCardRelationPickerDropdownId({
     fieldDefinition,
@@ -171,7 +177,7 @@ export const RecordDetailRelationRecordsListItem = ({
   );
 
   const handleDetach = () => {
-    closeDropdown();
+    closeDropdown(dropdownScopeId);
 
     const relationFieldMetadataItem = relationObjectMetadataItem.fields.find(
       ({ id }) => id === relationFieldMetadataId,
@@ -196,7 +202,7 @@ export const RecordDetailRelationRecordsListItem = ({
   };
 
   const handleDelete = async () => {
-    closeDropdown();
+    closeDropdown(dropdownScopeId);
     openModal(getDeleteRelationModalId(relationRecord.id));
   };
 

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

@@ -16,8 +16,9 @@ import { AggregateOperations } from '@/object-record/record-table/constants/Aggr
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { prefetchIndexViewIdFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchIndexViewIdFromObjectMetadataItemFamilySelector';
 import { AppPath } from '@/types/AppPath';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import { useLingui } from '@lingui/react/macro';
 import { RelationType } from '~/generated-metadata/graphql';
@@ -69,7 +70,10 @@ export const RecordDetailRelationSection = ({
     recordId,
   });
 
-  const { isDropdownOpen } = useDropdown(dropdownId);
+  const isDropdownOpen = useRecoilComponentValueV2(
+    isDropdownOpenComponentStateV2,
+    dropdownId,
+  );
 
   const indexViewId = useRecoilValue(
     prefetchIndexViewIdFromObjectMetadataItemFamilySelector({

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

@@ -16,7 +16,7 @@ import { getRecordFieldCardRelationPickerDropdownId } from '@/object-record/reco
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { dropdownPlacementComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownPlacementComponentStateV2';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@@ -52,7 +52,7 @@ export const RecordDetailRelationSectionDropdownToMany = () => {
     recordId,
   });
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const dropdownPlacement = useRecoilComponentValueV2(
     dropdownPlacementComponentStateV2,
@@ -125,7 +125,7 @@ export const RecordDetailRelationSectionDropdownToMany = () => {
   };
 
   const handleCreateNew = (searchString?: string) => {
-    closeDropdown();
+    closeDropdown(dropdownId);
 
     createNewRecordAndOpenRightDrawer?.(searchString);
   };
@@ -150,8 +150,12 @@ export const RecordDetailRelationSectionDropdownToMany = () => {
             componentInstanceId={dropdownId}
             onCreate={handleCreateNew}
             onChange={updateRelation}
-            onSubmit={closeDropdown}
+            onSubmit={() => {
-            onClickOutside={closeDropdown}
+              closeDropdown(dropdownId);
+            }}
+            onClickOutside={() => {
+              closeDropdown(dropdownId);
+            }}
             layoutDirection={
               dropdownPlacement?.includes('end')
                 ? 'search-bar-on-bottom'

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

@@ -16,7 +16,7 @@ import { getRecordFieldCardRelationPickerDropdownId } from '@/object-record/reco
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { dropdownPlacementComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownPlacementComponentStateV2';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@@ -54,7 +54,7 @@ export const RecordDetailRelationSectionDropdownToOne = () => {
     recordId,
   });
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const dropdownPlacement = useRecoilComponentValueV2(
     dropdownPlacementComponentStateV2,
@@ -80,7 +80,7 @@ export const RecordDetailRelationSectionDropdownToOne = () => {
   const handleRelationPickerEntitySelected = (
     selectedRelationEntity?: SingleRecordPickerRecord,
   ) => {
-    closeDropdown();
+    closeDropdown(dropdownId);
 
     if (!selectedRelationEntity?.id || !relationFieldMetadataItem?.name) return;
 
@@ -107,7 +107,7 @@ export const RecordDetailRelationSectionDropdownToOne = () => {
   };
 
   const handleCreateNew = (searchString?: string) => {
-    closeDropdown();
+    closeDropdown(dropdownId);
 
     createNewRecordAndOpenRightDrawer?.(searchString);
   };
@@ -138,7 +138,7 @@ export const RecordDetailRelationSectionDropdownToOne = () => {
             onRecordSelected={handleRelationPickerEntitySelected}
             objectNameSingular={relationObjectMetadataNameSingular}
             recordPickerInstanceId={dropdownId}
-            onCancel={closeDropdown}
+            onCancel={() => closeDropdown(dropdownId)}
             onCreate={shouldAllowCreateNew ? handleCreateNew : undefined}
             layoutDirection={
               dropdownPlacement?.includes('end')

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

@@ -5,11 +5,12 @@ import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-me
 import { getActionMenuDropdownIdFromActionMenuId } from '@/action-menu/utils/getActionMenuDropdownIdFromActionMenuId';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
+
 export const useTriggerActionMenuDropdown = ({
   recordTableId,
 }: {
@@ -32,7 +33,7 @@ export const useTriggerActionMenuDropdown = ({
     actionMenuDropdownId,
   );
 
-  const { openDropdown } = useDropdown(actionMenuDropdownId);
+  const { openDropdown } = useOpenDropdown();
 
   const { closeCommandMenu } = useCommandMenu();
 
@@ -57,13 +58,16 @@ export const useTriggerActionMenuDropdown = ({
 
         closeCommandMenu();
 
-        openDropdown();
+        openDropdown({
+          dropdownComponentInstanceIdFromProps: actionMenuDropdownId,
+        });
       },
     [
       recordIndexActionMenuDropdownPositionState,
       isRowSelectedFamilyState,
       closeCommandMenu,
       openDropdown,
+      actionMenuDropdownId,
     ],
   );
 

packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateDropdownSubmenuContent.tsx

@@ -6,7 +6,7 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
 import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useContext } from 'react';
 import { Key } from 'ts-key-enum';
@@ -22,13 +22,13 @@ export const RecordTableColumnAggregateFooterDropdownSubmenuContent = ({
   const { dropdownId, resetContent } = useContext(
     RecordTableColumnAggregateFooterDropdownContext,
   );
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   useScopedHotkeys(
     [Key.Escape],
     () => {
       resetContent();
-      closeDropdown();
+      closeDropdown(dropdownId);
     },
     TableOptionsHotkeyScope.Dropdown,
   );

packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterAggregateOperationMenuItems.tsx

@@ -2,7 +2,7 @@ import { getAggregateOperationLabel } from '@/object-record/record-board/record-
 import { RecordTableColumnAggregateFooterDropdownContext } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterDropdownContext';
 import { useViewFieldAggregateOperation } from '@/object-record/record-table/record-table-footer/hooks/useViewFieldAggregateOperation';
 import { ExtendedAggregateOperations } from '@/object-record/record-table/types/ExtendedAggregateOperations';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { ReactNode, useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { IconCheck } from 'twenty-ui/display';
@@ -23,7 +23,8 @@ export const RecordTableColumnAggregateFooterAggregateOperationMenuItems = ({
   const { dropdownId, resetContent } = useContext(
     RecordTableColumnAggregateFooterDropdownContext,
   );
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
+
   return (
     <>
       {aggregateOperations.map((operation) => (
@@ -31,7 +32,7 @@ export const RecordTableColumnAggregateFooterAggregateOperationMenuItems = ({
           key={operation}
           onClick={() => {
             updateViewFieldAggregateOperation(operation);
-            closeDropdown();
+            closeDropdown(dropdownId);
           }}
           text={getAggregateOperationLabel(operation)}
           RightIcon={
@@ -48,7 +49,7 @@ export const RecordTableColumnAggregateFooterAggregateOperationMenuItems = ({
         onClick={() => {
           updateViewFieldAggregateOperation(null);
           resetContent();
-          closeDropdown();
+          closeDropdown(dropdownId);
         }}
         text={'None'}
         RightIcon={

packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterMenuContent.tsx

@@ -7,7 +7,7 @@ import { getAvailableAggregateOperationsForFieldMetadataType } from '@/object-re
 import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { t } from '@lingui/core/macro';
 import { useContext, useMemo } from 'react';
@@ -25,13 +25,13 @@ export const RecordTableColumnAggregateFooterMenuContent = () => {
     fieldMetadataType,
     resetContent,
   } = useContext(RecordTableColumnAggregateFooterDropdownContext);
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
   const { objectMetadataItem } = useRecordTableContextOrThrow();
 
   useScopedHotkeys(
     [Key.Escape],
     () => {
-      closeDropdown();
+      closeDropdown(dropdownId);
     },
     TableOptionsHotkeyScope.Dropdown,
   );
@@ -106,7 +106,7 @@ export const RecordTableColumnAggregateFooterMenuContent = () => {
           onClick={() => {
             updateViewFieldAggregateOperation(null);
             resetContent();
-            closeDropdown();
+            closeDropdown(dropdownId);
           }}
           text={t`None`}
           RightIcon={

packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx

@@ -3,7 +3,7 @@ import { RECORD_TABLE_TD_WIDTH } from '@/object-record/record-table/record-table
 import { RecordTableColumnAggregateFooterCellContext } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterCellContext';
 import { RecordTableColumnAggregateFooterValue } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue';
 import { hasAggregateOperationForViewFieldFamilySelector } from '@/object-record/record-table/record-table-footer/states/hasAggregateOperationForViewFieldFamilySelector';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -60,7 +60,12 @@ export const RecordTableColumnAggregateFooterValueCell = ({
   isFirstCell: boolean;
 }) => {
   const [isHovered, setIsHovered] = useState(false);
-  const { isDropdownOpen } = useDropdown(dropdownId);
+
+  const isDropdownOpen = useRecoilComponentValueV2(
+    isDropdownOpenComponentStateV2,
+    dropdownId,
+  );
+
   const theme = useTheme();
   const { viewFieldId, fieldMetadataId } = useContext(
     RecordTableColumnAggregateFooterCellContext,

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

@@ -1,12 +1,12 @@
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 
 import { useOpenRecordFilterChipFromTableHeader } from '@/object-record/record-table/record-table-header/hooks/useOpenRecordFilterChipFromTableHeader';
 import { onToggleColumnSortComponentState } from '@/object-record/record-table/states/onToggleColumnSortComponentState';
 import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useToggleScrollWrapper } from '@/ui/utilities/scroll/hooks/useToggleScrollWrapper';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import styled from '@emotion/styled';
@@ -54,10 +54,12 @@ export const RecordTableColumnHeadDropdownMenu = ({
   const { handleColumnVisibilityChange, handleMoveTableColumn } =
     useTableColumns();
 
-  const { closeDropdown } = useDropdown(column.fieldMetadataId + '-header');
+  const dropdownId = column.fieldMetadataId + '-header';
+
+  const { closeDropdown } = useCloseDropdown();
 
   const closeDropdownAndToggleScroll = () => {
-    closeDropdown();
+    closeDropdown(dropdownId);
     toggleScrollXWrapper(true);
     toggleScrollYWrapper(false);
   };

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

@@ -11,7 +11,7 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useLingui } from '@lingui/react/macro';
@@ -23,7 +23,7 @@ export const RecordTableHeaderPlusButtonContent = () => {
   const { t } = useLingui();
   const { objectMetadataItem } = useRecordTableContextOrThrow();
 
-  const { closeDropdown } = useDropdown();
+  const { closeDropdown } = useCloseDropdown();
 
   const hiddenTableColumns = useRecoilComponentValueV2(
     hiddenTableColumnsComponentSelector,

packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx

@@ -4,7 +4,7 @@ import { SelectableItem } from '@/object-record/select/types/SelectableItem';
 import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
@@ -35,7 +35,7 @@ export const MultipleSelectDropdown = ({
   ) => void;
   loadingItems: boolean;
 }) => {
-  const { closeDropdown } = useDropdown();
+  const { closeDropdown } = useCloseDropdown();
 
   const { resetSelectedItem } = useSelectableList(selectableListId);
 

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

@@ -6,7 +6,7 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
 import { Trans, useLingui } from '@lingui/react/macro';
@@ -35,7 +35,7 @@ export const SettingsAccountsRowDropdownMenu = ({
   const { openModal } = useModal();
 
   const navigate = useNavigateSettings();
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const { destroyOneRecord } = useDestroyOneRecord({
     objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
@@ -62,7 +62,7 @@ export const SettingsAccountsRowDropdownMenu = ({
                 text={t`Emails settings`}
                 onClick={() => {
                   navigate(SettingsPath.AccountsEmails);
-                  closeDropdown();
+                  closeDropdown(dropdownId);
                 }}
               />
               <MenuItem
@@ -70,7 +70,7 @@ export const SettingsAccountsRowDropdownMenu = ({
                 text={t`Calendar settings`}
                 onClick={() => {
                   navigate(SettingsPath.AccountsCalendars);
-                  closeDropdown();
+                  closeDropdown(dropdownId);
                 }}
               />
               {account.authFailedAt && (
@@ -79,7 +79,7 @@ export const SettingsAccountsRowDropdownMenu = ({
                   text={t`Reconnect`}
                   onClick={() => {
                     triggerProviderReconnect(account.provider, account.id);
-                    closeDropdown();
+                    closeDropdown(dropdownId);
                   }}
                 />
               )}
@@ -88,7 +88,7 @@ export const SettingsAccountsRowDropdownMenu = ({
                 LeftIcon={IconTrash}
                 text={t`Remove account`}
                 onClick={() => {
-                  closeDropdown();
+                  closeDropdown(dropdownId);
                   openModal(DELETE_ACCOUNT_MODAL_ID);
                 }}
               />

packages/twenty-front/src/modules/settings/data-model/components/SettingsDataModelNewFieldBreadcrumbDropDown.tsx

@@ -3,7 +3,7 @@ import { SettingsPath } from '@/types/SettingsPath';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
@@ -66,7 +66,7 @@ const StyledButton = styled(Button)`
 
 export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
   const dropdownId = `settings-object-new-field-breadcrumb-dropdown`;
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
   const navigate = useNavigateSettings();
   const location = useLocation();
   const { objectNamePlural = '' } = useParams();
@@ -90,7 +90,7 @@ export const SettingsDataModelNewFieldBreadcrumbDropDown = () => {
         fieldType ? { fieldType } : undefined,
       );
     }
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   return (

packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx

@@ -5,7 +5,7 @@ import { TextInput } from '@/ui/input/components/TextInput';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
@@ -82,12 +82,8 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
   const SELECT_COLOR_DROPDOWN_ID = `select-color-dropdown-${option.id}`;
   const SELECT_ACTIONS_DROPDOWN_ID = `select-actions-dropdown-${option.id}`;
 
-  const { closeDropdown: closeColorDropdown } = useDropdown(
+  const { closeDropdown: closeColorDropdown } = useCloseDropdown();
-    SELECT_COLOR_DROPDOWN_ID,
+  const { closeDropdown: closeActionsDropdown } = useCloseDropdown();
-  );
-  const { closeDropdown: closeActionsDropdown } = useDropdown(
-    SELECT_ACTIONS_DROPDOWN_ID,
-  );
 
   const handleInputEnter = () => {
     onInputEnter?.();
@@ -126,7 +122,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
                   key={colorName}
                   onClick={() => {
                     onChange({ ...option, color: colorName });
-                    closeColorDropdown();
+                    closeColorDropdown(SELECT_COLOR_DROPDOWN_ID);
                   }}
                   color={colorName}
                   selected={colorName === option.color}
@@ -171,7 +167,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
                   text={t`Remove as default`}
                   onClick={() => {
                     onRemoveAsDefault?.();
-                    closeActionsDropdown();
+                    closeActionsDropdown(SELECT_ACTIONS_DROPDOWN_ID);
                   }}
                 />
               ) : (
@@ -180,7 +176,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
                   text={t`Set as default`}
                   onClick={() => {
                     onSetAsDefault?.();
-                    closeActionsDropdown();
+                    closeActionsDropdown(SELECT_ACTIONS_DROPDOWN_ID);
                   }}
                 />
               )}
@@ -191,7 +187,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
                   text={t`Remove option`}
                   onClick={() => {
                     onRemove();
-                    closeActionsDropdown();
+                    closeActionsDropdown(SELECT_ACTIONS_DROPDOWN_ID);
                   }}
                 />
               )}

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx

@@ -2,7 +2,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { isDefined } from 'twenty-shared/utils';
 import {
   IconArchive,
@@ -31,21 +31,21 @@ export const SettingsObjectFieldActiveActionDropdown = ({
 }: SettingsObjectFieldActiveActionDropdownProps) => {
   const dropdownId = `${scopeKey}-settings-field-active-action-dropdown`;
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const handleEdit = () => {
     onEdit();
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   const handleDeactivate = () => {
     onDeactivate?.();
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   const handleSetAsLabelIdentifier = () => {
     onSetAsLabelIdentifier?.();
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   return (

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx

@@ -2,7 +2,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { t } from '@lingui/core/macro';
 import {
   IconArchiveOff,
@@ -33,21 +33,21 @@ export const SettingsObjectFieldInactiveActionDropdown = ({
 }: SettingsObjectFieldInactiveActionDropdownProps) => {
   const dropdownId = `${scopeKey}-settings-field-disabled-action-dropdown`;
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const handleActivate = () => {
     onActivate();
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   const handleDelete = () => {
     onDelete();
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   const handleEdit = () => {
     onEdit();
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   const isDeletable = isCustomField;

packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsObjectInactiveMenuDropDown.tsx

@@ -2,7 +2,7 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { IconArchiveOff, IconDotsVertical, IconTrash } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
 import { MenuItem } from 'twenty-ui/navigation';
@@ -22,16 +22,16 @@ export const SettingsObjectInactiveMenuDropDown = ({
 }: SettingsObjectInactiveMenuDropDownProps) => {
   const dropdownId = `${scopeKey}-settings-object-inactive-menu-dropdown`;
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const handleActivate = () => {
     onActivate();
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   const handleDelete = () => {
     onDelete();
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   return (

packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignment.tsx

@@ -13,7 +13,7 @@ import { settingsDraftRoleFamilyState } from '@/settings/roles/states/settingsDr
 import { SettingsPath } from '@/types/SettingsPath';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useModal } from '@/ui/layout/modal/hooks/useModal';
 import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpenedComponentState';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
@@ -92,7 +92,10 @@ export const SettingsRoleAssignment = ({
     useState<SettingsRoleAssignmentConfirmationModalSelectedWorkspaceMember | null>(
       null,
     );
-  const { closeDropdown } = useDropdown('role-member-select');
+
+  const dropdownId = 'role-member-select';
+
+  const { closeDropdown } = useCloseDropdown();
   const [searchFilter, setSearchFilter] = useState('');
   const currentWorkspaceMembers = useRecoilValue(currentWorkspaceMembersState);
   const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
@@ -151,7 +154,7 @@ export const SettingsRoleAssignment = ({
       role: existingRole,
     });
     openModal(ROLE_ASSIGNMENT_CONFIRMATION_MODAL_ID);
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   const isModalOpened = useRecoilComponentValueV2(

packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSecuritySSORowDropdownMenu.tsx

@@ -6,7 +6,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useLingui } from '@lingui/react/macro';
 import { UnwrapRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
@@ -26,7 +26,7 @@ export const SettingsSecuritySSORowDropdownMenu = ({
 
   const { enqueueSnackBar } = useSnackBar();
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const { deleteSSOIdentityProvider } = useDeleteSSOIdentityProvider();
   const { updateSSOIdentityProvider } = useUpdateSSOIdentityProvider();
@@ -81,7 +81,7 @@ export const SettingsSecuritySSORowDropdownMenu = ({
               text={SSOIdp.status === 'Active' ? t`Deactivate` : t`Activate`}
               onClick={() => {
                 toggleSSOIdentityProviderStatus(SSOIdp.id);
-                closeDropdown();
+                closeDropdown(dropdownId);
               }}
             />
             <MenuItem
@@ -90,7 +90,7 @@ export const SettingsSecuritySSORowDropdownMenu = ({
               text={t`Delete`}
               onClick={() => {
                 handleDeleteSSOIdentityProvider(SSOIdp.id);
-                closeDropdown();
+                closeDropdown(dropdownId);
               }}
             />
           </DropdownMenuItemsContainer>

packages/twenty-front/src/modules/settings/security/components/approvedAccessDomains/SettingsSecurityApprovedAccessDomainRowDropdownMenu.tsx

@@ -4,7 +4,7 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { UnwrapRecoilValue, useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { IconDotsVertical, IconTrash } from 'twenty-ui/display';
@@ -27,7 +27,7 @@ export const SettingsSecurityApprovedAccessDomainRowDropdownMenu = ({
 
   const { enqueueSnackBar } = useSnackBar();
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const [deleteApprovedAccessDomain] = useDeleteApprovedAccessDomainMutation();
 
@@ -70,7 +70,7 @@ export const SettingsSecurityApprovedAccessDomainRowDropdownMenu = ({
               text="Delete"
               onClick={() => {
                 handleDeleteApprovedAccessDomain();
-                closeDropdown();
+                closeDropdown(dropdownId);
               }}
             />
           </DropdownMenuItemsContainer>

packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariableTableRow.tsx

@@ -3,7 +3,7 @@ import { TextInputV2 } from '@/ui/input/components/TextInputV2';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import styled from '@emotion/styled';
@@ -41,7 +41,7 @@ export const SettingsServerlessFunctionTabEnvironmentVariableTableRow = ({
   const [editedEnvVariable, setEditedEnvVariable] = useState(envVariable);
   const [editMode, setEditMode] = useState(initialEditMode);
   const dropDownId = `settings-environment-variable-dropdown-${envVariable.id}`;
-  const { closeDropdown } = useDropdown(dropDownId);
+  const { closeDropdown } = useCloseDropdown();
 
   return editMode ? (
     <StyledEditModeTableRow>
@@ -117,7 +117,7 @@ export const SettingsServerlessFunctionTabEnvironmentVariableTableRow = ({
                   LeftIcon={IconPencil}
                   onClick={() => {
                     setEditMode(true);
-                    closeDropdown();
+                    closeDropdown(dropDownId);
                   }}
                 />
                 <MenuItem
@@ -125,7 +125,7 @@ export const SettingsServerlessFunctionTabEnvironmentVariableTableRow = ({
                   LeftIcon={IconTrash}
                   onClick={() => {
                     onDelete();
-                    closeDropdown();
+                    closeDropdown(dropDownId);
                   }}
                 />
               </DropdownMenuItemsContainer>

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

@@ -8,7 +8,7 @@ import { MatchColumnSelectFieldSelectDropdownContent } from '@/spreadsheet-impor
 import { MatchColumnSelectSubFieldSelectDropdownContent } from '@/spreadsheet-import/components/MatchColumnSelectSubFieldSelectDropdownContent';
 import { DO_NOT_IMPORT_OPTION_KEY } from '@/spreadsheet-import/constants/DoNotImportOptionKey';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared/utils';
 import { IconChevronDown } from 'twenty-ui/display';
@@ -39,7 +39,7 @@ export const MatchColumnToFieldSelect = ({
 }: MatchColumnToFieldSelectProps) => {
   const dropdownId = `match-column-select-v2-dropdown-${columnIndex}`;
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const [selectedFieldMetadataItem, setSelectedFieldMetadataItem] =
     useState<FieldMetadataItem | null>(null);
@@ -81,7 +81,7 @@ export const MatchColumnToFieldSelect = ({
       setSelectedFieldMetadataItem(null);
 
       onChange(correspondingOption);
-      closeDropdown();
+      closeDropdown(dropdownId);
     }
   };
 
@@ -89,13 +89,13 @@ export const MatchColumnToFieldSelect = ({
     selectedSuggestedOption: SelectOption,
   ) => {
     onChange(selectedSuggestedOption);
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   const handleDoNotImportSelect = () => {
     if (isDefined(doNotImportOption)) {
       onChange(doNotImportOption);
-      closeDropdown();
+      closeDropdown(dropdownId);
     }
   };
 
@@ -109,7 +109,7 @@ export const MatchColumnToFieldSelect = ({
 
   const handleCancelSelectClick = () => {
     setSelectedFieldMetadataItem(null);
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   const doNotImportOption = options.find(

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

@@ -7,7 +7,6 @@ import {
 
 import { SpreadsheetMatchedOptions } from '@/spreadsheet-import/types/SpreadsheetMatchedOptions';
 import { getFieldOptions } from '@/spreadsheet-import/utils/getFieldOptions';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Tag, TagColor } from 'twenty-ui/components';
@@ -30,8 +29,6 @@ export const SubMatchingSelectDropdownButton = <T extends string>({
   column,
   placeholder,
 }: SubMatchingSelectDropdownButtonProps<T>) => {
-  const { openDropdown } = useDropdown();
-
   const { fields } = useSpreadsheetImportInternal<T>();
   const options = getFieldOptions(fields, column.value) as SelectOption[];
   const value = options.find((opt) => opt.value === option.value);
@@ -39,11 +36,7 @@ export const SubMatchingSelectDropdownButton = <T extends string>({
   const theme = useTheme();
 
   return (
-    <SubMatchingSelectControlContainer
+    <SubMatchingSelectControlContainer cursor="pointer" id="control">
-      cursor="pointer"
-      onClick={() => openDropdown()}
-      id="control"
-    >
       <Tag
         text={value?.label ?? placeholder}
         color={value?.color as TagColor}

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

@@ -10,7 +10,7 @@ import {
 } from '@/spreadsheet-import/types/SpreadsheetColumn';
 import { SpreadsheetMatchedOptions } from '@/spreadsheet-import/types/SpreadsheetMatchedOptions';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import styled from '@emotion/styled';
 import { SelectOption } from 'twenty-ui/input';
 
@@ -38,7 +38,7 @@ export const SubMatchingSelectRowRightDropdown = <T extends string>({
 }: SubMatchingSelectRowRightDropdownProps<T>) => {
   const dropdownId = `sub-matching-select-dropdown-${option.entry}`;
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const { fields } = useSpreadsheetImportInternal<T>();
   const options = getFieldOptions(fields, column.value) as SelectOption[];
@@ -46,7 +46,7 @@ export const SubMatchingSelectRowRightDropdown = <T extends string>({
 
   const handleSelect = (selectedOption: SelectOption) => {
     onSubChange(selectedOption.value as T, column.index, option.entry ?? '');
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   return (

packages/twenty-front/src/modules/support/components/SupportDropdown.tsx

@@ -3,23 +3,23 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { IconHelpCircle, IconMessage } from 'twenty-ui/display';
 import { MenuItem } from 'twenty-ui/navigation';
 
 export const SupportDropdown = () => {
   const dropdownId = `support-field-active-action-dropdown`;
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const handleTalkToUs = () => {
     window.FrontChat?.('show');
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   const handleUserGuide = () => {
     window.open('https://twenty.com/user-guide', '_blank');
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   return (

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

@@ -7,7 +7,7 @@ import {
   MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
   MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
 } from '@/ui/input/components/internal/date/components/InternalDatePicker';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
 import { useRecoilCallback } from 'recoil';
 import { Nullable } from 'twenty-ui/utilities';
@@ -61,23 +61,19 @@ export const DateInput = ({
     onSubmit?.(newDate);
   };
 
-  const { closeDropdown: closeDropdownMonthSelect } = useDropdown(
+  const { closeDropdown: closeDropdownMonthSelect } = useCloseDropdown();
-    MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
+  const { closeDropdown: closeDropdownYearSelect } = useCloseDropdown();
-  );
-  const { closeDropdown: closeDropdownYearSelect } = useDropdown(
-    MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
-  );
 
   const handleEnter = () => {
-    closeDropdownYearSelect();
+    closeDropdownYearSelect(MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID);
-    closeDropdownMonthSelect();
+    closeDropdownMonthSelect(MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID);
 
     onEnter(internalValue);
   };
 
   const handleEscape = () => {
-    closeDropdownYearSelect();
+    closeDropdownYearSelect(MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID);
-    closeDropdownMonthSelect();
+    closeDropdownMonthSelect(MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID);
 
     onEscape(internalValue);
   };
@@ -90,8 +86,8 @@ export const DateInput = ({
           .getValue();
 
         if (hotkeyScope?.scope === TableHotkeyScope.CellEditMode) {
-          closeDropdownYearSelect();
+          closeDropdownYearSelect(MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID);
-          closeDropdownMonthSelect();
+          closeDropdownMonthSelect(MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID);
           onEscape(internalValue);
           onClickOutside(event, internalValue);
         }

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

@@ -5,7 +5,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { arrayToChunks } from '~/utils/array/arrayToChunks';
@@ -13,6 +12,8 @@ import { arrayToChunks } from '~/utils/array/arrayToChunks';
 import { ICON_PICKER_DROPDOWN_CONTENT_WIDTH } from '@/ui/input/components/constants/IconPickerDropdownContentWidth';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
+import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
 import { useSelectableListListenToEnterHotkeyOnItem } from '@/ui/layout/selectable-list/hooks/useSelectableListListenToEnterHotkeyOnItem';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@@ -25,7 +26,6 @@ import {
   LightIconButton,
 } from 'twenty-ui/input';
 import { IconPickerHotkeyScope } from '../types/IconPickerHotkeyScope';
-import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
 
 export type IconPickerProps = {
   disabled?: boolean;
@@ -137,7 +137,7 @@ export const IconPicker = ({
     }
   };
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const { getIcons, getIcon } = useIcons();
   const icons = getIcons();
@@ -242,7 +242,7 @@ export const IconPicker = ({
                         iconKey={iconKey}
                         onClick={() => {
                           onChange({ iconKey, Icon: getIcon(iconKey) });
-                          closeDropdown();
+                          closeDropdown(dropdownId);
                         }}
                         selectedIconKey={selectedIconKey}
                         Icon={getIcon(iconKey)}

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

@@ -5,13 +5,13 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 
 import { SelectValue } from '@/ui/input/components/internal/select/types';
 import { SelectControl } from '@/ui/input/components/SelectControl';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
 import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
@@ -116,7 +116,7 @@ export const Select = <Value extends SelectValue>({
       !isDefined(callToActionButton) &&
       (!isDefined(emptyOption) || selectedOption !== emptyOption));
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const dropDownMenuWidth =
     dropdownWidthAuto && selectContainerRef.current?.clientWidth
@@ -195,7 +195,7 @@ export const Select = <Value extends SelectValue>({
                         onEnter={() => {
                           onChange?.(option.value);
                           onBlur?.();
-                          closeDropdown();
+                          closeDropdown(dropdownId);
                         }}
                       >
                         <MenuItemSelect
@@ -207,7 +207,7 @@ export const Select = <Value extends SelectValue>({
                           onClick={() => {
                             onChange?.(option.value);
                             onBlur?.();
-                            closeDropdown();
+                            closeDropdown(dropdownId);
                           }}
                         />
                       </SelectableListItem>

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

@@ -3,12 +3,12 @@ import styled from '@emotion/styled';
 
 import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 
 import { CurrencyPickerHotkeyScope } from '../types/CurrencyPickerHotkeyScope';
 
 import { CURRENCIES } from '@/settings/data-model/constants/Currencies';
 import { Currency } from '@/ui/input/components/internal/types/Currency';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { IconChevronDown } from 'twenty-ui/display';
 import { CurrencyPickerDropdownSelect } from './CurrencyPickerDropdownSelect';
 
@@ -52,13 +52,13 @@ export const CurrencyPickerDropdownButton = ({
 }) => {
   const theme = useTheme();
 
-  const { closeDropdown } = useDropdown(
+  const dropdownId = CurrencyPickerHotkeyScope.CurrencyPicker;
-    CurrencyPickerHotkeyScope.CurrencyPicker,
+
-  );
+  const { closeDropdown } = useCloseDropdown();
 
   const handleChange = (currency: Currency) => {
     onChange(currency);
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   const currency = CURRENCIES.find(

packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx

@@ -3,13 +3,12 @@ import { DateTime } from 'luxon';
 import { lazy, Suspense, useContext } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-
 import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
 import { AbsoluteDatePickerHeader } from '@/ui/input/components/internal/date/components/AbsoluteDatePickerHeader';
 import { DateTimeInput } from '@/ui/input/components/internal/date/components/DateTimeInput';
 import { RelativeDatePickerHeader } from '@/ui/input/components/internal/date/components/RelativeDatePickerHeader';
 import { getHighlightedDates } from '@/ui/input/components/internal/date/utils/getHighlightedDates';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { UserContext } from '@/users/contexts/UserContext';
 import {
   VariableDateViewFilterValueDirection,
@@ -342,12 +341,8 @@ export const DateTimePicker = ({
   const { timeZone } = useContext(UserContext);
   const theme = useTheme();
 
-  const { closeDropdown: closeDropdownMonthSelect } = useDropdown(
+  const { closeDropdown: closeDropdownMonthSelect } = useCloseDropdown();
-    MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
+  const { closeDropdown: closeDropdownYearSelect } = useCloseDropdown();
-  );
-  const { closeDropdown: closeDropdownYearSelect } = useDropdown(
-    MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
-  );
 
   const handleClear = () => {
     closeDropdowns();
@@ -355,8 +350,8 @@ export const DateTimePicker = ({
   };
 
   const closeDropdowns = () => {
-    closeDropdownYearSelect();
+    closeDropdownYearSelect(MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID);
-    closeDropdownMonthSelect();
+    closeDropdownMonthSelect(MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID);
   };
 
   const handleClose = (newDate: Date) => {

packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx

@@ -1,13 +1,15 @@
 import { useCountries } from '@/ui/input/components/internal/hooks/useCountries';
 import { Country } from '@/ui/input/components/internal/types/Country';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useEffect, useState } from 'react';
 
 import { PhoneCountryPickerDropdownSelect } from './PhoneCountryPickerDropdownSelect';
 
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
+import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import 'react-phone-number-input/style.css';
 import { isDefined } from 'twenty-shared/utils';
 import { IconChevronDown, IconWorld } from 'twenty-ui/display';
@@ -75,12 +77,17 @@ export const PhoneCountryPickerDropdownButton = ({
 
   const [selectedCountry, setSelectedCountry] = useState<Country>();
 
-  const { isDropdownOpen, closeDropdown } = useDropdown(
+  const dropdownId = 'country-picker-dropdown-id';
-    'country-picker-dropdown-id',
+
+  const isDropdownOpen = useRecoilComponentValueV2(
+    isDropdownOpenComponentStateV2,
+    dropdownId,
   );
 
+  const { closeDropdown } = useCloseDropdown();
+
   const handleChange = (countryCode: string) => {
-    closeDropdown();
+    closeDropdown(dropdownId);
     onChange(countryCode);
   };
 

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

@@ -3,11 +3,14 @@ import { DropdownInternalContainer } from '@/ui/layout/dropdown/components/inter
 import { DROPDOWN_RESIZE_MIN_HEIGHT } from '@/ui/layout/dropdown/constants/DropdownResizeMinHeight';
 import { DROPDOWN_RESIZE_MIN_WIDTH } from '@/ui/layout/dropdown/constants/DropdownResizeMinWidth';
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
+import { useToggleDropdown } from '@/ui/layout/dropdown/hooks/useToggleDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { dropdownMaxHeightComponentState } from '@/ui/layout/dropdown/states/internal/dropdownMaxHeightComponentState';
 import { dropdownMaxWidthComponentState } from '@/ui/layout/dropdown/states/internal/dropdownMaxWidthComponentState';
+import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
 import { GlobalHotkeysConfig } from '@/ui/utilities/hotkey/types/GlobalHotkeysConfig';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import styled from '@emotion/styled';
 import {
@@ -24,7 +27,6 @@ import { Keys } from 'react-hotkeys-hook';
 import { useRecoilCallback } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { useIsMobile } from 'twenty-ui/utilities';
-import { useDropdown } from '../hooks/useDropdown';
 
 type Width = `${string}px` | `${number}%` | 'auto' | number;
 const StyledDropdownFallbackAnchor = styled.div`
@@ -75,7 +77,12 @@ export const Dropdown = ({
   excludedClickOutsideIds,
   isDropdownInModal = false,
 }: DropdownProps) => {
-  const { isDropdownOpen, toggleDropdown } = useDropdown(dropdownId);
+  const isDropdownOpen = useRecoilComponentValueV2(
+    isDropdownOpenComponentStateV2,
+    dropdownId,
+  );
+
+  const { toggleDropdown } = useToggleDropdown();
 
   const isUsingOffset =
     isDefined(dropdownOffset?.x) || isDefined(dropdownOffset?.y);
@@ -147,10 +154,12 @@ export const Dropdown = ({
       event.stopPropagation();
       event.preventDefault();
 
-      toggleDropdown(globalHotkeysConfig);
+      toggleDropdown({
-      onClickOutside?.();
+        dropdownComponentInstanceIdFromProps: dropdownId,
+        globalHotkeysConfig,
+      });
     },
-    [globalHotkeysConfig, onClickOutside, toggleDropdown],
+    [globalHotkeysConfig, toggleDropdown, dropdownId],
   );
 
   return (

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

@@ -1,7 +1,7 @@
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useTheme } from '@emotion/react';
 
 import styled from '@emotion/styled';
@@ -43,7 +43,7 @@ export const DropdownMenuInnerSelect = ({
 }: DropdownMenuInnerSelectProps) => {
   const theme = useTheme();
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   return (
     <Dropdown
@@ -61,7 +61,7 @@ export const DropdownMenuInnerSelect = ({
                 key={`dropdown-menu-inner-select-item-${selectOption.value}`}
                 onClick={() => {
                   onChange(selectOption);
-                  closeDropdown();
+                  closeDropdown(dropdownId);
                 }}
                 text={selectOption.label}
                 disabled={selectOption.disabled}

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

@@ -7,6 +7,11 @@ import { useAvailableComponentInstanceId } from '@/ui/utilities/state/component-
 import { useRecoilCallback } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 
+type ToggleDropdownArgs = {
+  dropdownComponentInstanceIdFromProps?: string;
+  globalHotkeysConfig?: Partial<GlobalHotkeysConfig>;
+};
+
 export const useToggleDropdown = () => {
   const dropdownComponentInstanceIdFromContext =
     useAvailableComponentInstanceId(DropdownComponentInstanceContext);
@@ -16,15 +21,9 @@ export const useToggleDropdown = () => {
 
   const toggleDropdown = useRecoilCallback(
     ({ snapshot }) =>
-      ({
+      (args?: ToggleDropdownArgs | null | undefined) => {
-        dropdownComponentInstanceIdFromProps,
-        globalHotkeysConfig,
-      }: {
-        dropdownComponentInstanceIdFromProps?: string;
-        globalHotkeysConfig?: Partial<GlobalHotkeysConfig>;
-      }) => {
         const dropdownComponentInstanceId =
-          dropdownComponentInstanceIdFromProps ??
+          args?.dropdownComponentInstanceIdFromProps ??
           dropdownComponentInstanceIdFromContext;
 
         if (!isDefined(dropdownComponentInstanceId)) {
@@ -44,7 +43,7 @@ export const useToggleDropdown = () => {
         } else {
           openDropdown({
             dropdownComponentInstanceIdFromProps: dropdownComponentInstanceId,
-            globalHotkeysConfig,
+            globalHotkeysConfig: args?.globalHotkeysConfig,
           });
         }
       },

packages/twenty-front/src/modules/ui/layout/tab-list/components/TabList.tsx

@@ -1,4 +1,4 @@
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { TAB_LIST_GAP } from '@/ui/layout/tab-list/constants/TabListGap';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
 import { TabListComponentInstanceContext } from '@/ui/layout/tab-list/states/contexts/TabListComponentInstanceContext';
@@ -87,7 +87,7 @@ export const TabList = ({
   const hasHiddenTabs = hiddenTabsCount > 0;
 
   const dropdownId = `tab-overflow-${componentInstanceId}`;
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const isActiveTabHidden = useMemo(() => {
     if (!hasHiddenTabs) return false;
@@ -215,7 +215,7 @@ export const TabList = ({
               <TabListDropdown
                 dropdownId={dropdownId}
                 onClose={() => {
-                  closeDropdown();
+                  closeDropdown(dropdownId);
                 }}
                 overflow={{
                   hiddenTabsCount,

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx

@@ -16,7 +16,7 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu
 import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { MULTI_WORKSPACE_DROPDOWN_ID } from '@/ui/navigation/navigation-drawer/constants/MultiWorkspaceDropdownId';
 import { multiWorkspaceDropdownState } from '@/ui/navigation/navigation-drawer/states/multiWorkspaceDropdownState';
 import { useColorScheme } from '@/ui/theme/hooks/useColorScheme';
@@ -57,7 +57,7 @@ export const MultiWorkspaceDropdownDefaultComponents = () => {
   const availableWorkspacesCount =
     countAvailableWorkspaces(availableWorkspaces);
   const { buildWorkspaceUrl } = useBuildWorkspaceUrl();
-  const { closeDropdown } = useDropdown(MULTI_WORKSPACE_DROPDOWN_ID);
+  const { closeDropdown } = useCloseDropdown();
   const { signOut } = useAuth();
   const { enqueueSnackBar } = useSnackBar();
   const { colorScheme, colorSchemeList } = useColorScheme();
@@ -195,7 +195,9 @@ export const MultiWorkspaceDropdownDefaultComponents = () => {
         />
         <UndecoratedLink
           to={getSettingsPath(SettingsPath.WorkspaceMembersPage)}
-          onClick={closeDropdown}
+          onClick={() => {
+            closeDropdown(MULTI_WORKSPACE_DROPDOWN_ID);
+          }}
         >
           <MenuItem LeftIcon={IconUserPlus} text={t`Invite user`} />
         </UndecoratedLink>

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

@@ -9,7 +9,7 @@ import { SOFT_DELETE_FILTER_FIELD_NAME } from '@/object-record/record-filter/con
 import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
 import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
 import { getAllRecordFilterDescendantsOfRecordFilterGroup } from '@/object-record/record-filter/utils/getAllRecordFilterDescendantsOfRecordFilterGroup';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { SortOrFilterChip } from '@/views/components/SortOrFilterChip';
 import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
@@ -19,7 +19,7 @@ import { isDefined } from 'twenty-shared/utils';
 import { IconFilter } from 'twenty-ui/display';
 
 export const AdvancedFilterChip = () => {
-  const { closeDropdown } = useDropdown(ADVANCED_FILTER_DROPDOWN_ID);
+  const { closeDropdown } = useCloseDropdown();
 
   const currentRecordFilterGroups = useRecoilComponentValueV2(
     currentRecordFilterGroupsComponentState,
@@ -49,7 +49,7 @@ export const AdvancedFilterChip = () => {
     });
 
   const handleRemoveClick = () => {
-    closeDropdown();
+    closeDropdown(ADVANCED_FILTER_DROPDOWN_ID);
 
     const viewFilterGroupIds = currentRecordFilterGroups.map(
       (recordFilterGroup) => recordFilterGroup.id,

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

@@ -2,12 +2,12 @@ import { useCallback } from 'react';
 
 import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { EditableFilterChip } from '@/views/components/EditableFilterChip';
 
 import { ObjectFilterDropdownFilterInput } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterInput';
 import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
 import { isRecordFilterConsideredEmpty } from '@/object-record/record-filter/utils/isRecordFilterConsideredEmpty';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useSetEditableFilterChipDropdownStates } from '@/views/hooks/useSetEditableFilterChipDropdownStates';
 
 type EditableFilterDropdownButtonProps = {
@@ -17,12 +17,14 @@ type EditableFilterDropdownButtonProps = {
 export const EditableFilterDropdownButton = ({
   recordFilter,
 }: EditableFilterDropdownButtonProps) => {
-  const { closeDropdown } = useDropdown(recordFilter.id);
+  const dropdownId = recordFilter.id;
+
+  const { closeDropdown } = useCloseDropdown();
 
   const { removeRecordFilter } = useRemoveRecordFilter();
 
   const handleRemove = () => {
-    closeDropdown();
+    closeDropdown(dropdownId);
 
     removeRecordFilter({ recordFilterId: recordFilter.id });
   };

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

@@ -4,7 +4,8 @@ import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
+import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
@@ -43,12 +44,8 @@ export const UpdateViewButtonGroup = () => {
     contextStoreCurrentViewIdComponentState,
   );
 
-  const { closeDropdown: closeUpdateViewButtonDropdown } = useDropdown(
+  const { closeDropdown: closeUpdateViewButtonDropdown } = useCloseDropdown();
-    UPDATE_VIEW_BUTTON_DROPDOWN_ID,
+  const { openDropdown: openViewPickerDropdown } = useOpenDropdown();
-  );
-  const { openDropdown: openViewPickerDropdown } = useDropdown(
-    VIEW_PICKER_DROPDOWN_ID,
-  );
   const { currentView } = useGetCurrentViewOnly();
 
   const setViewPickerReferenceViewId = useSetRecoilComponentStateV2(
@@ -60,11 +57,13 @@ export const UpdateViewButtonGroup = () => {
       return;
     }
 
-    openViewPickerDropdown();
+    openViewPickerDropdown({
+      dropdownComponentInstanceIdFromProps: VIEW_PICKER_DROPDOWN_ID,
+    });
     setViewPickerReferenceViewId(currentViewId);
     setViewPickerMode('create-from-current');
 
-    closeUpdateViewButtonDropdown();
+    closeUpdateViewButtonDropdown(UPDATE_VIEW_BUTTON_DROPDOWN_ID);
   };
 
   const handleCreateViewClick = () => {

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

@@ -1,13 +1,13 @@
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId';
 
 import { useResetFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useResetFilterDropdown';
+import { useToggleDropdown } from '@/ui/layout/dropdown/hooks/useToggleDropdown';
 import { t } from '@lingui/core/macro';
 import { IconPlus } from 'twenty-ui/display';
 import { LightButton } from 'twenty-ui/input';
 
 export const ViewBarDetailsAddFilterButton = () => {
-  const { toggleDropdown } = useDropdown(VIEW_BAR_FILTER_DROPDOWN_ID);
+  const { toggleDropdown } = useToggleDropdown();
 
   const { resetFilterDropdown } = useResetFilterDropdown(
     VIEW_BAR_FILTER_DROPDOWN_ID,
@@ -15,7 +15,9 @@ export const ViewBarDetailsAddFilterButton = () => {
 
   const handleClick = () => {
     resetFilterDropdown();
-    toggleDropdown();
+    toggleDropdown({
+      dropdownComponentInstanceIdFromProps: VIEW_BAR_FILTER_DROPDOWN_ID,
+    });
   };
 
   return (

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

@@ -1,10 +1,14 @@
 import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId';
 import { Trans } from '@lingui/react/macro';
 
 export const ViewBarFilterButton = () => {
-  const { isDropdownOpen } = useDropdown(VIEW_BAR_FILTER_DROPDOWN_ID);
+  const isDropdownOpen = useRecoilComponentValueV2(
+    isDropdownOpenComponentStateV2,
+    VIEW_BAR_FILTER_DROPDOWN_ID,
+  );
 
   return (
     <StyledHeaderDropdownButton isUnfolded={isDropdownOpen}>

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

@@ -3,7 +3,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId';
 import { useVectorSearchFilterActions } from '@/views/hooks/useVectorSearchFilterActions';
 
-import { OPERAND_DROPDOWN_CLICK_OUTSIDE_ID } from '@/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandDropdown';
 import { objectFilterDropdownCurrentRecordFilterComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownCurrentRecordFilterComponentState';
 import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter';
 import { isRecordFilterConsideredEmpty } from '@/object-record/record-filter/utils/isRecordFilterConsideredEmpty';
@@ -53,7 +52,6 @@ export const ViewBarFilterDropdown = () => {
       dropdownComponents={<ViewBarFilterDropdownContent />}
       dropdownOffset={{ y: 8 }}
       onClickOutside={handleDropdownClickOutside}
-      excludedClickOutsideIds={[OPERAND_DROPDOWN_CLICK_OUTSIDE_ID]}
     />
   );
 };

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

@@ -12,7 +12,8 @@ import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDrop
 import { useSetRecordFilterUsedInAdvancedFilterDropdownRow } from '@/object-record/advanced-filter/hooks/useSetRecordFilterUsedInAdvancedFilterDropdownRow';
 import { RecordFilterGroupLogicalOperator } from '@/object-record/record-filter-group/types/RecordFilterGroupLogicalOperator';
 import { useCreateEmptyRecordFilterFromFieldMetadataItem } from '@/object-record/record-filter/hooks/useCreateEmptyRecordFilterFromFieldMetadataItem';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
+import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { ADVANCED_FILTER_DROPDOWN_ID } from '@/views/constants/AdvancedFilterDropdownId';
 import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
@@ -40,13 +41,9 @@ export const ViewBarFilterDropdownAdvancedFilterButton = () => {
     VIEW_BAR_FILTER_BOTTOM_MENU_ITEM_IDS.ADVANCED_FILTER,
   );
 
-  const { openDropdown: openAdvancedFilterDropdown } = useDropdown(
+  const { openDropdown: openAdvancedFilterDropdown } = useOpenDropdown();
-    ADVANCED_FILTER_DROPDOWN_ID,
-  );
 
-  const { closeDropdown: closeObjectFilterDropdown } = useDropdown(
+  const { closeDropdown: closeObjectFilterDropdown } = useCloseDropdown();
-    VIEW_BAR_FILTER_DROPDOWN_ID,
-  );
 
   const { currentView } = useGetCurrentViewOnly();
 
@@ -118,8 +115,10 @@ export const ViewBarFilterDropdownAdvancedFilterButton = () => {
       setRecordFilterUsedInAdvancedFilterDropdownRow(newRecordFilter);
     }
 
-    closeObjectFilterDropdown();
+    closeObjectFilterDropdown(VIEW_BAR_FILTER_DROPDOWN_ID);
-    openAdvancedFilterDropdown();
+    openAdvancedFilterDropdown({
+      dropdownComponentInstanceIdFromProps: ADVANCED_FILTER_DROPDOWN_ID,
+    });
   };
 
   return (

packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx

@@ -3,7 +3,8 @@ import styled from '@emotion/styled';
 
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useGetRecordIndexTotalCount } from '@/views/hooks/internal/useGetRecordIndexTotalCount';
 import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
 import { ViewPickerContentCreateMode } from '@/views/view-picker/components/ViewPickerContentCreateMode';
@@ -51,7 +52,8 @@ export const ViewPickerDropdown = () => {
 
   const { totalCount } = useGetRecordIndexTotalCount();
 
-  const { isDropdownOpen: isViewsListDropdownOpen } = useDropdown(
+  const isDropdownOpen = useRecoilComponentValueV2(
+    isDropdownOpenComponentStateV2,
     VIEW_PICKER_DROPDOWN_ID,
   );
 
@@ -61,7 +63,7 @@ export const ViewPickerDropdown = () => {
   const CurrentViewIcon = getIcon(currentView?.icon);
 
   const handleClickOutside = async () => {
-    if (isViewsListDropdownOpen && viewPickerMode === 'edit') {
+    if (isDropdownOpen && viewPickerMode === 'edit') {
       await updateViewFromCurrentState();
     }
     setViewPickerMode('list');
@@ -74,7 +76,7 @@ export const ViewPickerDropdown = () => {
       dropdownPlacement="bottom-start"
       onClickOutside={handleClickOutside}
       clickableComponent={
-        <StyledDropdownButtonContainer isUnfolded={isViewsListDropdownOpen}>
+        <StyledDropdownButtonContainer isUnfolded={isDropdownOpen}>
           {currentView && CurrentViewIcon ? (
             <CurrentViewIcon size={theme.icon.size.md} />
           ) : (

packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx

@@ -9,7 +9,7 @@ import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableLi
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useChangeView } from '@/views/hooks/useChangeView';
 import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
@@ -51,11 +51,11 @@ export const ViewPickerListContent = () => {
   const { updateView } = useUpdateView();
   const { changeView } = useChangeView();
 
-  const { closeDropdown } = useDropdown(VIEW_PICKER_DROPDOWN_ID);
+  const { closeDropdown } = useCloseDropdown();
 
   const handleViewSelect = (viewId: string) => {
     changeView(viewId);
-    closeDropdown();
+    closeDropdown(VIEW_PICKER_DROPDOWN_ID);
   };
 
   const handleAddViewButtonClick = () => {

packages/twenty-front/src/modules/views/view-picker/components/ViewPickerOptionDropdown.tsx

@@ -2,7 +2,7 @@ import { useCreateFavorite } from '@/favorites/hooks/useCreateFavorite';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { MenuItemWithOptionDropdown } from '@/ui/navigation/menu-item/components/MenuItemWithOptionDropdown';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { View } from '@/views/types/View';
@@ -33,8 +33,10 @@ export const ViewPickerOptionDropdown = ({
   view,
   handleViewSelect,
 }: ViewPickerOptionDropdownProps) => {
+  const dropdownId = `view-picker-options-${view.id}`;
+
   const { t } = useLingui();
-  const { closeDropdown } = useDropdown(`view-picker-options-${view.id}`);
+  const { closeDropdown } = useCloseDropdown();
   const { getIcon } = useIcons();
   const [isHovered, setIsHovered] = useState(false);
   const { deleteViewFromCurrentState } = useDeleteViewFromCurrentState();
@@ -54,7 +56,7 @@ export const ViewPickerOptionDropdown = ({
   const handleDelete = () => {
     setViewPickerReferenceViewId(view.id);
     deleteViewFromCurrentState();
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   const handleAddToFavorites = () => {
@@ -64,7 +66,7 @@ export const ViewPickerOptionDropdown = ({
       setViewPickerReferenceViewId(view.id);
       setViewPickerMode('favorite-folders-picker');
     }
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   return (
@@ -103,7 +105,7 @@ export const ViewPickerOptionDropdown = ({
                     text={t`Edit`}
                     onClick={(event) => {
                       onEdit(event, view.id);
-                      closeDropdown();
+                      closeDropdown(dropdownId);
                     }}
                   />
                   <MenuItem

packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerDatabaseEventForm.tsx

@@ -9,7 +9,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { WorkflowFieldsMultiSelect } from '@/workflow/components/WorkflowEditUpdateEventFieldsMultiSelect';
 import { WorkflowDatabaseEventTrigger } from '@/workflow/types/Workflow';
 import { splitWorkflowTriggerEventName } from '@/workflow/utils/splitWorkflowTriggerEventName';
@@ -71,7 +71,9 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
   const { getIcon } = useIcons();
   const [searchInputValue, setSearchInputValue] = useState('');
   const [isSystemObjectsOpen, setIsSystemObjectsOpen] = useState(false);
-  const { closeDropdown } = useDropdown('workflow-edit-trigger-record-type');
+  const dropdownId = 'workflow-edit-trigger-record-type';
+
+  const { closeDropdown } = useCloseDropdown();
 
   const { objectMetadataItems } = useFilteredObjectMetadataItems();
 
@@ -131,7 +133,7 @@ export const WorkflowEditTriggerDatabaseEventForm = ({
         eventName: `${value}.${triggerEvent.event}`,
       },
     });
-    closeDropdown();
+    closeDropdown(dropdownId);
   };
 
   const handleFieldsChange = (fields: FieldMultiSelectValue | string) => {

packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownWorkflowStepItems.tsx

@@ -4,12 +4,12 @@ import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { StepOutputSchema } from '@/workflow/workflow-variables/types/StepOutputSchema';
 import { useState } from 'react';
 import { IconX, OverflowingTextWithTooltip, useIcons } from 'twenty-ui/display';
 import { MenuItem, MenuItemSelect } from 'twenty-ui/navigation';
-import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
 
 type WorkflowVariablesDropdownWorkflowStepItemsProps = {
   dropdownId: string;
@@ -25,7 +25,7 @@ export const WorkflowVariablesDropdownWorkflowStepItems = ({
   const { getIcon } = useIcons();
   const [searchInputValue, setSearchInputValue] = useState('');
 
-  const { closeDropdown } = useDropdown(dropdownId);
+  const { closeDropdown } = useCloseDropdown();
 
   const availableSteps = steps.filter((step) =>
     searchInputValue
@@ -38,7 +38,7 @@ export const WorkflowVariablesDropdownWorkflowStepItems = ({
       <DropdownMenuHeader
         StartComponent={
           <DropdownMenuHeaderLeftComponent
-            onClick={closeDropdown}
+            onClick={() => closeDropdown(dropdownId)}
             Icon={IconX}
           />
         }