fix: Dropdown Overlapping Sidebar on Column Header Click in Horizontal Table When Scrolling (#8287)

fixes : #8272

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-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>

packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx

@@ -1,12 +1,12 @@
-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 { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
-import { RecordTableColumnHeadDropdownMenu } from './RecordTableColumnHeadDropdownMenu';
+import styled from '@emotion/styled';
-
+import { useCallback } from 'react';
 import { RecordTableColumnHead } from './RecordTableColumnHead';
+import { RecordTableColumnHeadDropdownMenu } from './RecordTableColumnHeadDropdownMenu';
 
 type RecordTableColumnHeadWithDropdownProps = {
   column: ColumnDefinition<FieldMetadata>;
@@ -14,7 +14,6 @@ type RecordTableColumnHeadWithDropdownProps = {
 
 const StyledDropdown = styled(Dropdown)`
   display: flex;
-
   flex: 1;
   z-index: ${({ theme }) => theme.lastLayerZIndex};
 `;
@@ -22,8 +21,28 @@ const StyledDropdown = styled(Dropdown)`
 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} />}

packages/twenty-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,
+  });

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 (

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>