From 9683a19287d62e23dcb91c256f7b74ca667fd11b Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Tue, 9 Jul 2024 18:13:42 +0200
Subject: [PATCH] Enhance Dropdown API to make portal usage optional (#6182)

Using a portal in dropdown systematically can be an issue in case we are
having dropdown within dropdown. The useClickOutside listener will be
triggered. It's easier to usePortal only in the case we really need
them, which is quite rare
---
 .../constants/ColumnHeadDropdownId.ts             |  1 -
 .../RecordTableColumnHeadWithDropdown.tsx         |  1 +
 .../ui/layout/dropdown/components/Dropdown.tsx    | 15 ++++++++++++++-
 3 files changed, 15 insertions(+), 2 deletions(-)
 delete mode 100644 packages/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts

diff --git a/packages/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts
deleted file mode 100644
index 8598c854650d..000000000000
--- a/packages/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const COLUMN_HEAD_DROPDOWN_ID = 'table-head-options-dropdown-id';
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
index d1ad7e1de48b..6298c77f1dac 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
@@ -28,6 +28,7 @@ export const RecordTableColumnHeadWithDropdown = ({
       clickableComponent={<RecordTableColumnHead column={column} />}
       dropdownComponents={<RecordTableColumnHeadDropdownMenu column={column} />}
       dropdownOffset={{ x: -1 }}
+      usePortal
       dropdownPlacement="bottom-start"
       dropdownHotkeyScope={{ scope: column.fieldMetadataId + '-header' }}
     />
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
index a7ba44db239c..14ba3644193d 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
@@ -40,6 +40,7 @@ type DropdownProps = {
   dropdownStrategy?: 'fixed' | 'absolute';
   disableBlur?: boolean;
   onClickOutside?: () => void;
+  usePortal?: boolean;
   onClose?: () => void;
   onOpen?: () => void;
 };
@@ -56,6 +57,7 @@ export const Dropdown = ({
   dropdownStrategy = 'absolute',
   dropdownOffset = { x: 0, y: 0 },
   disableBlur = false,
+  usePortal = false,
   onClickOutside,
   onClose,
   onOpen,
@@ -131,7 +133,7 @@ export const Dropdown = ({
             onHotkeyTriggered={handleHotkeyTriggered}
           />
         )}
-        {isDropdownOpen && (
+        {isDropdownOpen && usePortal && (
           <FloatingPortal>
             <DropdownMenu
               disableBlur={disableBlur}
@@ -144,6 +146,17 @@ export const Dropdown = ({
             </DropdownMenu>
           </FloatingPortal>
         )}
+        {isDropdownOpen && !usePortal && (
+          <DropdownMenu
+            disableBlur={disableBlur}
+            width={dropdownMenuWidth ?? dropdownWidth}
+            data-select-disable
+            ref={refs.setFloating}
+            style={floatingStyles}
+          >
+            {dropdownComponents}
+          </DropdownMenu>
+        )}
         <DropdownOnToggleEffect
           onDropdownClose={onClose}
           onDropdownOpen={onOpen}