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

…l Table When Scrolling (#8287) fixes : #8272 --------- Co-authored-by: Lucas Bordeau <[email protected]>
twentyhq · Nov 18, 2024 · 5115022 · 5115022
1 parent 8b8b9fe
commit 5115022
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 12 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
@@ -10,6 +10,8 @@ import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { useSaveCurrentViewFields } from '@/views/hooks/useSaveCurrentViewFields';
 import { mapColumnDefinitionsToViewFields } from '@/views/utils/mapColumnDefinitionToViewField';
 
+import { isScrollEnabledForRecordTableState } from '@/object-record/record-table/states/isScrollEnabledForRecordTableState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { RecordUpdateContext } from '../contexts/EntityUpdateMutationHookContext';
 import { useRecordTable } from '../hooks/useRecordTable';
 
@@ -46,6 +48,11 @@ export const RecordTableWithWrappers = ({
   recordTableId,
   viewBarId,
 }: RecordTableWithWrappersProps) => {
+  const isScrollEnabledForRecordTable = useRecoilComponentValueV2(
+    isScrollEnabledForRecordTableState,
+    recordTableId,
+  );
+
   const { resetTableRowSelection, selectAllRows } = useRecordTable({
     recordTableId,
   });
@@ -80,7 +87,11 @@ export const RecordTableWithWrappers = ({
 
   return (
     <EntityDeleteContext.Provider value={deleteOneRecord}>
-      <ScrollWrapper contextProviderName="recordTableWithWrappers">
+      <ScrollWrapper
+        enableXScroll={isScrollEnabledForRecordTable.enableXScroll}
+        enableYScroll={isScrollEnabledForRecordTable.enableYScroll}
+        contextProviderName="recordTableWithWrappers"
+      >
         <RecordUpdateContext.Provider value={updateRecordMutation}>
           <StyledTableWithHeader>
             <StyledTableContainer>

diff --git a/...-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx b/...-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
@@ -1,29 +1,48 @@
-import styled from '@emotion/styled';
-
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
+import { isScrollEnabledForRecordTableState } from '@/object-record/record-table/states/isScrollEnabledForRecordTableState';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-
-import { RecordTableColumnHeadDropdownMenu } from './RecordTableColumnHeadDropdownMenu';
-
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import styled from '@emotion/styled';
+import { useCallback } from 'react';
 import { RecordTableColumnHead } from './RecordTableColumnHead';
+import { RecordTableColumnHeadDropdownMenu } from './RecordTableColumnHeadDropdownMenu';
 
 type RecordTableColumnHeadWithDropdownProps = {
   column: ColumnDefinition<FieldMetadata>;
 };
 
 const StyledDropdown = styled(Dropdown)`
   display: flex;
-
   flex: 1;
   z-index: ${({ theme }) => theme.lastLayerZIndex};
 `;
 
 export const RecordTableColumnHeadWithDropdown = ({
   column,
 }: RecordTableColumnHeadWithDropdownProps) => {
+  const setIsScrollEnabledForRecordTable = useSetRecoilComponentStateV2(
+    isScrollEnabledForRecordTableState,
+  );
+
+  const handleDropdownOpen = useCallback(() => {
+    setIsScrollEnabledForRecordTable({
+      enableXScroll: false,
+      enableYScroll: false,
+    });
+  }, [setIsScrollEnabledForRecordTable]);
+
+  const handleDropdownClose = useCallback(() => {
+    setIsScrollEnabledForRecordTable({
+      enableXScroll: true,
+      enableYScroll: true,
+    });
+  }, [setIsScrollEnabledForRecordTable]);
+
   return (
     <StyledDropdown
+      onOpen={handleDropdownOpen}
+      onClose={handleDropdownClose}
       dropdownId={column.fieldMetadataId + '-header'}
       clickableComponent={<RecordTableColumnHead column={column} />}
       dropdownComponents={<RecordTableColumnHeadDropdownMenu column={column} />}

diff --git a/...front/src/modules/object-record/record-table/states/isScrollEnabledForRecordTableState.ts b/...front/src/modules/object-record/record-table/states/isScrollEnabledForRecordTableState.ts
@@ -0,0 +1,17 @@
+import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+
+export type ScrollEnabled = {
+  enableXScroll: boolean;
+  enableYScroll: boolean;
+};
+
+export const isScrollEnabledForRecordTableState =
+  createComponentStateV2<ScrollEnabled>({
+    key: 'isScrollEnabledForRecordTableState',
+    defaultValue: {
+      enableXScroll: true,
+      enableYScroll: true,
+    },
+    componentInstanceContext: RecordTableComponentInstanceContext,
+  });
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
@@ -126,7 +126,6 @@ export const Dropdown = ({
     listenerId: dropdownId,
     callback: () => {
       onClickOutside?.();
-
       if (isDropdownOpen) {
         closeDropdown();
       }
@@ -141,10 +140,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
@@ -45,7 +45,6 @@ export const ScrollWrapper = ({
     useScrollStates(contextProviderName);
   const setScrollTop = useSetRecoilState(scrollTopComponentState);
   const setScrollLeft = useSetRecoilState(scrollLeftComponentState);
-
   const handleScroll = (overlayScroll: OverlayScrollbars) => {
     const target = overlayScroll.elements().scrollOffsetElement;
     setScrollTop(target.scrollTop);
@@ -78,7 +77,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>