From 9e9eca22a465c6994ae843f8e3bf15ad706bb9fa Mon Sep 17 00:00:00 2001
From: David Pham <tuananh200898@gmail.com>
Date: Sat, 21 Oct 2023 17:07:50 +0700
Subject: [PATCH] Fix issue 2151: Dropdown menu of header table does not close
 after hide column (#2177)

* Fix issue 2151: Dropdown menu of header table does not close after hide column

* Remove dropdown scope

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../components/ColumnHeadWithDropdown.tsx     |  1 +
 .../DataTableColumnDropdownMenu.tsx           | 47 +++++++++----------
 2 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/front/src/modules/ui/data/data-table/components/ColumnHeadWithDropdown.tsx b/front/src/modules/ui/data/data-table/components/ColumnHeadWithDropdown.tsx
index 9b86e3b41..ff29d7bf0 100644
--- a/front/src/modules/ui/data/data-table/components/ColumnHeadWithDropdown.tsx
+++ b/front/src/modules/ui/data/data-table/components/ColumnHeadWithDropdown.tsx
@@ -32,6 +32,7 @@ export const ColumnHeadWithDropdown = ({
             primaryColumnKey={primaryColumnKey}
           />
         }
+        dropdownOffset={{ x: -1 }}
         dropdownPlacement="bottom-start"
         dropdownHotkeyScope={{ scope: column.key + '-header' }}
       />
diff --git a/front/src/modules/ui/data/data-table/components/DataTableColumnDropdownMenu.tsx b/front/src/modules/ui/data/data-table/components/DataTableColumnDropdownMenu.tsx
index bec8f54fa..6898d8a44 100644
--- a/front/src/modules/ui/data/data-table/components/DataTableColumnDropdownMenu.tsx
+++ b/front/src/modules/ui/data/data-table/components/DataTableColumnDropdownMenu.tsx
@@ -1,11 +1,9 @@
 import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
 import { IconArrowLeft, IconArrowRight, IconEyeOff } from '@/ui/display/icon';
-import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
-import { ColumnHeadDropdownId } from '../constants/ColumnHeadDropdownId';
 import { useTableColumns } from '../hooks/useTableColumns';
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
@@ -25,9 +23,7 @@ export const DataTableColumnDropdownMenu = ({
   const { handleColumnVisibilityChange, handleMoveTableColumn } =
     useTableColumns();
 
-  const { closeDropdown } = useDropdown({
-    dropdownScopeId: ColumnHeadDropdownId,
-  });
+  const { closeDropdown } = useDropdown();
 
   const handleColumnMoveLeft = () => {
     closeDropdown();
@@ -46,34 +42,33 @@ export const DataTableColumnDropdownMenu = ({
   };
 
   const handleColumnVisibility = () => {
+    closeDropdown();
     handleColumnVisibilityChange(column);
   };
 
   return column.key === primaryColumnKey ? (
     <></>
   ) : (
-    <DropdownMenu>
-      <DropdownMenuItemsContainer>
-        {!isFirstColumn && (
-          <MenuItem
-            LeftIcon={IconArrowLeft}
-            onClick={handleColumnMoveLeft}
-            text="Move left"
-          />
-        )}
-        {!isLastColumn && (
-          <MenuItem
-            LeftIcon={IconArrowRight}
-            onClick={handleColumnMoveRight}
-            text="Move right"
-          />
-        )}
+    <DropdownMenuItemsContainer>
+      {!isFirstColumn && (
         <MenuItem
-          LeftIcon={IconEyeOff}
-          onClick={handleColumnVisibility}
-          text="Hide"
+          LeftIcon={IconArrowLeft}
+          onClick={handleColumnMoveLeft}
+          text="Move left"
         />
-      </DropdownMenuItemsContainer>
-    </DropdownMenu>
+      )}
+      {!isLastColumn && (
+        <MenuItem
+          LeftIcon={IconArrowRight}
+          onClick={handleColumnMoveRight}
+          text="Move right"
+        />
+      )}
+      <MenuItem
+        LeftIcon={IconEyeOff}
+        onClick={handleColumnVisibility}
+        text="Hide"
+      />
+    </DropdownMenuItemsContainer>
   );
 };