fix: Dropdown Overlapping Sidebar on Column Header Click in Horizonta…

…l Table When Scrolling
Vardhaman619 · Nov 2, 2024 · 3db6985 · 3db6985
1 parent 558cc68
commit 3db6985
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 30 deletions.
diff --git a/...wenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx b/...wenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import { useRecoilCallback } from 'recoil';
 
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
@@ -15,6 +15,7 @@ import { mapColumnDefinitionsToViewFields } from '@/views/utils/mapColumnDefinit
 import { RecordUpdateContext } from '../contexts/EntityUpdateMutationHookContext';
 import { useRecordTable } from '../hooks/useRecordTable';
 
+import { RecordTableScrollContext } from '@/object-record/record-table/contexts/RecordTableScrollContext';
 import { RecordTableInternalEffect } from './RecordTableInternalEffect';
 
 const StyledTableWithHeader = styled.div`
@@ -45,6 +46,8 @@ export const RecordTableWithWrappers = ({
   recordTableId,
   viewBarId,
 }: RecordTableWithWrappersProps) => {
+  const [enableXScroll, setEnableXScroll] = useState(true);
+  const [enableYScroll, setEnableYScroll] = useState(true);
   const tableBodyRef = useRef<HTMLDivElement>(null);
 
   const { resetTableRowSelection, setRowSelected } = useRecordTable({
@@ -68,33 +71,46 @@ export const RecordTableWithWrappers = ({
 
   return (
     <EntityDeleteContext.Provider value={deleteOneRecord}>
-      <ScrollWrapper contextProviderName="recordTableWithWrappers">
-        <RecordUpdateContext.Provider value={updateRecordMutation}>
-          <StyledTableWithHeader>
-            <StyledTableContainer>
-              <StyledTableInternalContainer ref={tableBodyRef}>
-                <RecordTable
-                  viewBarId={viewBarId}
+      <RecordTableScrollContext.Provider
+        value={{
+          enableXScroll,
+          enableYScroll,
+          setEnableXScroll,
+          setEnableYScroll,
+        }}
+      >
+        <ScrollWrapper
+          enableXScroll={enableXScroll}
+          enableYScroll={enableYScroll}
+          contextProviderName="recordTableWithWrappers"
+        >
+          <RecordUpdateContext.Provider value={updateRecordMutation}>
+            <StyledTableWithHeader>
+              <StyledTableContainer>
+                <StyledTableInternalContainer ref={tableBodyRef}>
+                  <RecordTable
+                    viewBarId={viewBarId}
+                    recordTableId={recordTableId}
+                    objectNameSingular={objectNameSingular}
+                    onColumnsChange={handleColumnsChange}
+                  />
+                  <DragSelect
+                    dragSelectable={tableBodyRef}
+                    onDragSelectionStart={() => {
+                      resetTableRowSelection();
+                    }}
+                    onDragSelectionChange={setRowSelected}
+                  />
+                </StyledTableInternalContainer>
+                <RecordTableInternalEffect
+                  tableBodyRef={tableBodyRef}
                   recordTableId={recordTableId}
-                  objectNameSingular={objectNameSingular}
-                  onColumnsChange={handleColumnsChange}
                 />
-                <DragSelect
-                  dragSelectable={tableBodyRef}
-                  onDragSelectionStart={() => {
-                    resetTableRowSelection();
-                  }}
-                  onDragSelectionChange={setRowSelected}
-                />
-              </StyledTableInternalContainer>
-              <RecordTableInternalEffect
-                tableBodyRef={tableBodyRef}
-                recordTableId={recordTableId}
-              />
-            </StyledTableContainer>
-          </StyledTableWithHeader>
-        </RecordUpdateContext.Provider>
-      </ScrollWrapper>
+              </StyledTableContainer>
+            </StyledTableWithHeader>
+          </RecordUpdateContext.Provider>
+        </ScrollWrapper>
+      </RecordTableScrollContext.Provider>
     </EntityDeleteContext.Provider>
   );
 };
diff --git a/.../twenty-front/src/modules/object-record/record-table/contexts/RecordTableScrollContext.ts b/.../twenty-front/src/modules/object-record/record-table/contexts/RecordTableScrollContext.ts
@@ -0,0 +1,13 @@
+import { createContext, Dispatch, SetStateAction } from 'react';
+
+export type RecordTableScrollContextProps = {
+  enableXScroll: boolean;
+  setEnableXScroll: Dispatch<SetStateAction<boolean>>;
+  enableYScroll: boolean;
+  setEnableYScroll: Dispatch<SetStateAction<boolean>>;
+};
+
+export const RecordTableScrollContext =
+  createContext<RecordTableScrollContextProps>(
+    {} as RecordTableScrollContextProps,
+  );
diff --git a/...-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx b/...-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
@@ -6,6 +6,8 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 
 import { RecordTableColumnHeadDropdownMenu } from './RecordTableColumnHeadDropdownMenu';
 
+import { RecordTableScrollContext } from '@/object-record/record-table/contexts/RecordTableScrollContext';
+import { useCallback, useContext } from 'react';
 import { RecordTableColumnHead } from './RecordTableColumnHead';
 
 type RecordTableColumnHeadWithDropdownProps = {
@@ -22,8 +24,21 @@ const StyledDropdown = styled(Dropdown)`
 export const RecordTableColumnHeadWithDropdown = ({
   column,
 }: RecordTableColumnHeadWithDropdownProps) => {
+  const { setEnableXScroll, setEnableYScroll } = useContext(
+    RecordTableScrollContext,
+  );
+  const handleDropdownOpen = useCallback(() => {
+    setEnableXScroll(false);
+    setEnableYScroll(false);
+  }, [setEnableXScroll, setEnableYScroll]);
+  const handleDropdownClose = useCallback(() => {
+    setEnableXScroll(true);
+    setEnableYScroll(true);
+  }, [setEnableXScroll, setEnableYScroll]);
   return (
     <StyledDropdown
+      onOpen={handleDropdownOpen}
+      onClose={handleDropdownClose}
       dropdownId={column.fieldMetadataId + '-header'}
       clickableComponent={<RecordTableColumnHead column={column} />}
       dropdownComponents={<RecordTableColumnHeadDropdownMenu column={column} />}

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
@@ -116,7 +116,6 @@ export const Dropdown = ({
     refs: [refs.floating],
     callback: () => {
       onClickOutside?.();
-
       if (isDropdownOpen) {
         closeDropdown();
       }
@@ -131,10 +130,12 @@ export const Dropdown = ({
   useScopedHotkeys(
     [Key.Escape],
     () => {
-      closeDropdown();
+      if (isDropdownOpen) {
+        closeDropdown();
+      }
     },
     dropdownHotkeyScope.scope,
-    [closeDropdown],
+    [closeDropdown, isDropdownOpen],
   );
 
   return (

diff --git a/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx b/packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
@@ -78,7 +78,12 @@ export const ScrollWrapper = ({
   }, [instance, setOverlayScrollbars]);
 
   return (
-    <Context.Provider value={{ ref: scrollableRef, id: contextProviderName }}>
+    <Context.Provider
+      value={{
+        ref: scrollableRef,
+        id: contextProviderName,
+      }}
+    >
       <StyledScrollWrapper ref={scrollableRef} className={className}>
         {children}
       </StyledScrollWrapper>