From 3db6985cd8ac3a3101df2410f16fbdcc708a8d3b Mon Sep 17 00:00:00 2001 From: Vardhaman Bhandari Date: Sat, 2 Nov 2024 15:16:29 +0530 Subject: [PATCH] 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(null); const { resetTableRowSelection, setRowSelected } = useRecordTable({ @@ -68,33 +71,46 @@ export const RecordTableWithWrappers = ({ return ( - - - - - - + + + + + + + { + resetTableRowSelection(); + }} + onDragSelectionChange={setRowSelected} + /> + + - { - resetTableRowSelection(); - }} - onDragSelectionChange={setRowSelected} - /> - - - - - - + + + + + ); }; 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>; + enableYScroll: boolean; + setEnableYScroll: Dispatch>; +}; + +export const RecordTableScrollContext = + createContext( + {} 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 ( } dropdownComponents={} 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 ( - + {children}