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
twentyhq · Jul 9, 2024 · 9683a19 · 9683a19
1 parent 2838700
commit 9683a19
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/...ges/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts b/...ges/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts
diff --git a/...-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx b/...-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
@@ -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}