From 3db6985cd8ac3a3101df2410f16fbdcc708a8d3b Mon Sep 17 00:00:00 2001
From: Vardhaman Bhandari <sbhandari78504@gmail.com>
Date: Sat, 2 Nov 2024 15:16:29 +0530
Subject: [PATCH 1/5] fix: Dropdown Overlapping Sidebar on Column Header Click
 in Horizontal Table When Scrolling

---
 .../components/RecordTableWithWrappers.tsx    | 68 ++++++++++++-------
 .../contexts/RecordTableScrollContext.ts      | 13 ++++
 .../RecordTableColumnHeadWithDropdown.tsx     | 15 ++++
 .../layout/dropdown/components/Dropdown.tsx   |  7 +-
 .../scroll/components/ScrollWrapper.tsx       |  7 +-
 5 files changed, 80 insertions(+), 30 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/object-record/record-table/contexts/RecordTableScrollContext.ts

diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
index c91df83a3fc5..191dda1697d7 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
+++ b/packages/twenty-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/packages/twenty-front/src/modules/object-record/record-table/contexts/RecordTableScrollContext.ts b/packages/twenty-front/src/modules/object-record/record-table/contexts/RecordTableScrollContext.ts
new file mode 100644
index 000000000000..e270d92f80bd
--- /dev/null
+++ b/packages/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/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
index 6298c77f1dac..413fd0193a23 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-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
index 017da77f40cb..885df3bded0b 100644
--- 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
index 97d4560694fd..bac906e905e2 100644
--- 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>

From ecfe15ae8936630bb602f1e9381a353001be7e72 Mon Sep 17 00:00:00 2001
From: Vardhaman Bhandari <sbhandari78504@gmail.com>
Date: Mon, 11 Nov 2024 14:55:11 +0530
Subject: [PATCH 2/5] refactor: replace useContext with Recoil state

---
 .../components/RecordTableWithWrappers.tsx    | 76 +++++++++----------
 .../contexts/RecordTableScrollContext.ts      | 13 ----
 .../RecordTableColumnHeadWithDropdown.tsx     | 33 ++++----
 .../isScrollEnabledForRecordTableState.ts     | 13 ++++
 .../scroll/components/ScrollWrapper.tsx       |  1 -
 5 files changed, 64 insertions(+), 72 deletions(-)
 delete mode 100644 packages/twenty-front/src/modules/object-record/record-table/contexts/RecordTableScrollContext.ts
 create mode 100644 packages/twenty-front/src/modules/object-record/record-table/states/isScrollEnabledForRecordTableState.ts

diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
index 191dda1697d7..2e422f77d458 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
-import { useRef, useState } from 'react';
-import { useRecoilCallback } from 'recoil';
+import { useRef } from 'react';
+import { useRecoilCallback, useRecoilValue } from 'recoil';
 
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
@@ -15,7 +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 { isScrollEnabledForRecordTableState } from '@/object-record/record-table/states/isScrollEnabledForRecordTableState';
 import { RecordTableInternalEffect } from './RecordTableInternalEffect';
 
 const StyledTableWithHeader = styled.div`
@@ -46,9 +46,10 @@ export const RecordTableWithWrappers = ({
   recordTableId,
   viewBarId,
 }: RecordTableWithWrappersProps) => {
-  const [enableXScroll, setEnableXScroll] = useState(true);
-  const [enableYScroll, setEnableYScroll] = useState(true);
   const tableBodyRef = useRef<HTMLDivElement>(null);
+  const isScrollEnabledForRecordTable = useRecoilValue(
+    isScrollEnabledForRecordTableState,
+  );
 
   const { resetTableRowSelection, setRowSelected } = useRecordTable({
     recordTableId,
@@ -71,46 +72,37 @@ export const RecordTableWithWrappers = ({
 
   return (
     <EntityDeleteContext.Provider value={deleteOneRecord}>
-      <RecordTableScrollContext.Provider
-        value={{
-          enableXScroll,
-          enableYScroll,
-          setEnableXScroll,
-          setEnableYScroll,
-        }}
+      <ScrollWrapper
+        enableXScroll={isScrollEnabledForRecordTable.enableXScroll}
+        enableYScroll={isScrollEnabledForRecordTable.enableYScroll}
+        contextProviderName="recordTableWithWrappers"
       >
-        <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}
+        <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}
                 />
-              </StyledTableContainer>
-            </StyledTableWithHeader>
-          </RecordUpdateContext.Provider>
-        </ScrollWrapper>
-      </RecordTableScrollContext.Provider>
+              </StyledTableInternalContainer>
+              <RecordTableInternalEffect
+                tableBodyRef={tableBodyRef}
+                recordTableId={recordTableId}
+              />
+            </StyledTableContainer>
+          </StyledTableWithHeader>
+        </RecordUpdateContext.Provider>
+      </ScrollWrapper>
     </EntityDeleteContext.Provider>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-table/contexts/RecordTableScrollContext.ts b/packages/twenty-front/src/modules/object-record/record-table/contexts/RecordTableScrollContext.ts
deleted file mode 100644
index e270d92f80bd..000000000000
--- a/packages/twenty-front/src/modules/object-record/record-table/contexts/RecordTableScrollContext.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-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/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
index 413fd0193a23..e1532d3fa655 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
@@ -1,14 +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 { RecordTableColumnHeadDropdownMenu } from './RecordTableColumnHeadDropdownMenu';
-
-import { RecordTableScrollContext } from '@/object-record/record-table/contexts/RecordTableScrollContext';
-import { useCallback, useContext } from 'react';
+import styled from '@emotion/styled';
+import { useCallback } from 'react';
+import { useSetRecoilState } from 'recoil';
 import { RecordTableColumnHead } from './RecordTableColumnHead';
+import { RecordTableColumnHeadDropdownMenu } from './RecordTableColumnHeadDropdownMenu';
 
 type RecordTableColumnHeadWithDropdownProps = {
   column: ColumnDefinition<FieldMetadata>;
@@ -16,7 +14,6 @@ type RecordTableColumnHeadWithDropdownProps = {
 
 const StyledDropdown = styled(Dropdown)`
   display: flex;
-
   flex: 1;
   z-index: ${({ theme }) => theme.lastLayerZIndex};
 `;
@@ -24,17 +21,21 @@ const StyledDropdown = styled(Dropdown)`
 export const RecordTableColumnHeadWithDropdown = ({
   column,
 }: RecordTableColumnHeadWithDropdownProps) => {
-  const { setEnableXScroll, setEnableYScroll } = useContext(
-    RecordTableScrollContext,
+  const isScrollEnabledForRecordTable = useSetRecoilState(
+    isScrollEnabledForRecordTableState,
   );
   const handleDropdownOpen = useCallback(() => {
-    setEnableXScroll(false);
-    setEnableYScroll(false);
-  }, [setEnableXScroll, setEnableYScroll]);
+    isScrollEnabledForRecordTable({
+      enableXScroll: false,
+      enableYScroll: false,
+    });
+  }, [isScrollEnabledForRecordTable]);
   const handleDropdownClose = useCallback(() => {
-    setEnableXScroll(true);
-    setEnableYScroll(true);
-  }, [setEnableXScroll, setEnableYScroll]);
+    isScrollEnabledForRecordTable({
+      enableXScroll: true,
+      enableYScroll: true,
+    });
+  }, [isScrollEnabledForRecordTable]);
   return (
     <StyledDropdown
       onOpen={handleDropdownOpen}
diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isScrollEnabledForRecordTableState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isScrollEnabledForRecordTableState.ts
new file mode 100644
index 000000000000..c5e0c18ebdf6
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/isScrollEnabledForRecordTableState.ts
@@ -0,0 +1,13 @@
+import { createState } from 'twenty-ui';
+type isScrollEnabledForRecordTableStateType = {
+  enableXScroll: boolean;
+  enableYScroll: boolean;
+};
+export const isScrollEnabledForRecordTableState =
+  createState<isScrollEnabledForRecordTableStateType>({
+    key: 'isScrollEnabledForRecordTableState',
+    defaultValue: {
+      enableXScroll: true,
+      enableYScroll: true,
+    },
+  });
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
index bac906e905e2..41dc48f13809 100644
--- 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);

From aa88c453f5fd5053f7ca503f690ceb90359c12ee Mon Sep 17 00:00:00 2001
From: Lucas Bordeau <bordeau.lucas@gmail.com>
Date: Fri, 15 Nov 2024 16:56:12 +0100
Subject: [PATCH 3/5] Fix

---
 .../components/RecordTableWithWrappers.tsx    |  7 ++++++-
 .../RecordTableColumnHeadWithDropdown.tsx     |  3 +++
 .../isScrollEnabledForRecordTableState.ts     | 19 ++++++++++---------
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
index 26265b150168..d3522da7add8 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { useRecoilCallback } from 'recoil';
+import { useRecoilCallback, useRecoilValue } from 'recoil';
 
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
@@ -10,6 +10,7 @@ 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 { RecordUpdateContext } from '../contexts/EntityUpdateMutationHookContext';
 
 const StyledTableWithHeader = styled.div`
@@ -40,6 +41,10 @@ export const RecordTableWithWrappers = ({
   recordTableId,
   viewBarId,
 }: RecordTableWithWrappersProps) => {
+  const isScrollEnabledForRecordTable = useRecoilValue(
+    isScrollEnabledForRecordTableState,
+  );
+
   const { saveViewFields } = useSaveCurrentViewFields(viewBarId);
 
   const { deleteOneRecord } = useDeleteOneRecord({ objectNameSingular });
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
index e1532d3fa655..0b440af8492a 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
@@ -24,18 +24,21 @@ export const RecordTableColumnHeadWithDropdown = ({
   const isScrollEnabledForRecordTable = useSetRecoilState(
     isScrollEnabledForRecordTableState,
   );
+
   const handleDropdownOpen = useCallback(() => {
     isScrollEnabledForRecordTable({
       enableXScroll: false,
       enableYScroll: false,
     });
   }, [isScrollEnabledForRecordTable]);
+
   const handleDropdownClose = useCallback(() => {
     isScrollEnabledForRecordTable({
       enableXScroll: true,
       enableYScroll: true,
     });
   }, [isScrollEnabledForRecordTable]);
+
   return (
     <StyledDropdown
       onOpen={handleDropdownOpen}
diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isScrollEnabledForRecordTableState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isScrollEnabledForRecordTableState.ts
index c5e0c18ebdf6..184ffab86756 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/states/isScrollEnabledForRecordTableState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/isScrollEnabledForRecordTableState.ts
@@ -1,13 +1,14 @@
 import { createState } from 'twenty-ui';
-type isScrollEnabledForRecordTableStateType = {
+
+export type ScrollEnabled = {
   enableXScroll: boolean;
   enableYScroll: boolean;
 };
-export const isScrollEnabledForRecordTableState =
-  createState<isScrollEnabledForRecordTableStateType>({
-    key: 'isScrollEnabledForRecordTableState',
-    defaultValue: {
-      enableXScroll: true,
-      enableYScroll: true,
-    },
-  });
+
+export const isScrollEnabledForRecordTableState = createState<ScrollEnabled>({
+  key: 'isScrollEnabledForRecordTableState',
+  defaultValue: {
+    enableXScroll: true,
+    enableYScroll: true,
+  },
+});

From 7a3ca1477eb9d80c0e9abd8fb8df0427f6b0dbaf Mon Sep 17 00:00:00 2001
From: Lucas Bordeau <bordeau.lucas@gmail.com>
Date: Fri, 15 Nov 2024 16:57:34 +0100
Subject: [PATCH 4/5] Used a recoil component state

---
 .../components/RecordTableWithWrappers.tsx    |  5 +++--
 .../RecordTableColumnHeadWithDropdown.tsx     |  4 ++--
 .../isScrollEnabledForRecordTableState.ts     | 19 +++++++++++--------
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
index d3522da7add8..7bd0c064e935 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { useRecoilCallback, useRecoilValue } from 'recoil';
+import { useRecoilCallback } from 'recoil';
 
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
@@ -11,6 +11,7 @@ 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';
 
 const StyledTableWithHeader = styled.div`
@@ -41,7 +42,7 @@ export const RecordTableWithWrappers = ({
   recordTableId,
   viewBarId,
 }: RecordTableWithWrappersProps) => {
-  const isScrollEnabledForRecordTable = useRecoilValue(
+  const isScrollEnabledForRecordTable = useRecoilComponentValueV2(
     isScrollEnabledForRecordTableState,
   );
 
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
index 0b440af8492a..2c1445cc2d3e 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
@@ -2,9 +2,9 @@ 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 styled from '@emotion/styled';
 import { useCallback } from 'react';
-import { useSetRecoilState } from 'recoil';
 import { RecordTableColumnHead } from './RecordTableColumnHead';
 import { RecordTableColumnHeadDropdownMenu } from './RecordTableColumnHeadDropdownMenu';
 
@@ -21,7 +21,7 @@ const StyledDropdown = styled(Dropdown)`
 export const RecordTableColumnHeadWithDropdown = ({
   column,
 }: RecordTableColumnHeadWithDropdownProps) => {
-  const isScrollEnabledForRecordTable = useSetRecoilState(
+  const isScrollEnabledForRecordTable = useSetRecoilComponentStateV2(
     isScrollEnabledForRecordTableState,
   );
 
diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isScrollEnabledForRecordTableState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isScrollEnabledForRecordTableState.ts
index 184ffab86756..00e1e4c530ca 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/states/isScrollEnabledForRecordTableState.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/isScrollEnabledForRecordTableState.ts
@@ -1,14 +1,17 @@
-import { createState } from 'twenty-ui';
+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 = createState<ScrollEnabled>({
-  key: 'isScrollEnabledForRecordTableState',
-  defaultValue: {
-    enableXScroll: true,
-    enableYScroll: true,
-  },
-});
+export const isScrollEnabledForRecordTableState =
+  createComponentStateV2<ScrollEnabled>({
+    key: 'isScrollEnabledForRecordTableState',
+    defaultValue: {
+      enableXScroll: true,
+      enableYScroll: true,
+    },
+    componentInstanceContext: RecordTableComponentInstanceContext,
+  });

From 06feb59d2269b04b2630fb521895a7a6b29c04db Mon Sep 17 00:00:00 2001
From: Lucas Bordeau <bordeau.lucas@gmail.com>
Date: Fri, 15 Nov 2024 17:25:47 +0100
Subject: [PATCH 5/5] Fix

---
 .../components/RecordTableWithWrappers.tsx             |  1 +
 .../components/RecordTableColumnHeadWithDropdown.tsx   | 10 +++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
index 7bd0c064e935..80fb558cd6ac 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx
@@ -44,6 +44,7 @@ export const RecordTableWithWrappers = ({
 }: RecordTableWithWrappersProps) => {
   const isScrollEnabledForRecordTable = useRecoilComponentValueV2(
     isScrollEnabledForRecordTableState,
+    recordTableId,
   );
 
   const { saveViewFields } = useSaveCurrentViewFields(viewBarId);
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
index 2c1445cc2d3e..adb91a3ecb31 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx
@@ -21,23 +21,23 @@ const StyledDropdown = styled(Dropdown)`
 export const RecordTableColumnHeadWithDropdown = ({
   column,
 }: RecordTableColumnHeadWithDropdownProps) => {
-  const isScrollEnabledForRecordTable = useSetRecoilComponentStateV2(
+  const setIsScrollEnabledForRecordTable = useSetRecoilComponentStateV2(
     isScrollEnabledForRecordTableState,
   );
 
   const handleDropdownOpen = useCallback(() => {
-    isScrollEnabledForRecordTable({
+    setIsScrollEnabledForRecordTable({
       enableXScroll: false,
       enableYScroll: false,
     });
-  }, [isScrollEnabledForRecordTable]);
+  }, [setIsScrollEnabledForRecordTable]);
 
   const handleDropdownClose = useCallback(() => {
-    isScrollEnabledForRecordTable({
+    setIsScrollEnabledForRecordTable({
       enableXScroll: true,
       enableYScroll: true,
     });
-  }, [isScrollEnabledForRecordTable]);
+  }, [setIsScrollEnabledForRecordTable]);
 
   return (
     <StyledDropdown