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 3dd91a2f5fdc..4186aa651b50 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 @@ -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 ( - + 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..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 @@ -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 { 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; @@ -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 ( } dropdownComponents={} 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..00e1e4c530ca --- /dev/null +++ b/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({ + 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 index 2ec7a8471f96..60256909b788 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 @@ -117,7 +117,6 @@ export const Dropdown = ({ listenerId: dropdownId, callback: () => { onClickOutside?.(); - if (isDropdownOpen) { closeDropdown(); } @@ -132,10 +131,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..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); @@ -78,7 +77,12 @@ export const ScrollWrapper = ({ }, [instance, setOverlayScrollbars]); return ( - + {children}