From 72ab6bcf352fbd5dbd25a204211bd2a486bfb395 Mon Sep 17 00:00:00 2001 From: Faisal-imtiyaz123 <142205282+Faisal-imtiyaz123@users.noreply.github.com> Date: Wed, 18 Sep 2024 14:05:13 +0530 Subject: [PATCH] Fixes resetting of scroll position in RecordShowPage due to opening of some dropdowns (#6890) (#6906) fixes #6890 --------- Co-authored-by: Lucas Bordeau --- .../components/RecordIndexRecordChip.tsx | 4 +-- .../contexts/RecordIndexEventContext.tsx | 9 ------- .../hooks/useOpenRecordTableCellV2.ts | 4 +-- .../components/RecordTableRowWrapper.tsx | 4 +-- .../useInputFocusWithoutScrollOnMount.ts | 14 +++++++++++ .../components/DropdownMenuSearchInput.tsx | 25 +++++++++++-------- 6 files changed, 35 insertions(+), 25 deletions(-) delete mode 100644 packages/twenty-front/src/modules/object-record/record-index/contexts/RecordIndexEventContext.tsx create mode 100644 packages/twenty-front/src/modules/ui/input/hooks/useInputFocusWithoutScrollOnMount.ts diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx index 7def9788b..959d09b8c 100644 --- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx +++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexRecordChip.tsx @@ -1,7 +1,7 @@ import { AvatarChip, AvatarChipVariant } from 'twenty-ui'; import { useRecordChipData } from '@/object-record/hooks/useRecordChipData'; -import { RecordIndexEventContext } from '@/object-record/record-index/contexts/RecordIndexEventContext'; +import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { useContext } from 'react'; @@ -16,7 +16,7 @@ export const RecordIdentifierChip = ({ record, variant, }: RecordIdentifierChipProps) => { - const { onIndexIdentifierClick } = useContext(RecordIndexEventContext); + const { onIndexIdentifierClick } = useContext(RecordIndexRootPropsContext); const { recordChipData } = useRecordChipData({ objectNameSingular, diff --git a/packages/twenty-front/src/modules/object-record/record-index/contexts/RecordIndexEventContext.tsx b/packages/twenty-front/src/modules/object-record/record-index/contexts/RecordIndexEventContext.tsx deleted file mode 100644 index 7de19221d..000000000 --- a/packages/twenty-front/src/modules/object-record/record-index/contexts/RecordIndexEventContext.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { createEventContext } from '~/utils/createEventContext'; - -export type RecordIndexEventContextProps = { - onIndexIdentifierClick: (recordId: string) => void; - onIndexRecordsLoaded: () => void; -}; - -export const RecordIndexEventContext = - createEventContext(); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts index d25f41655..0159b907b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts @@ -20,7 +20,7 @@ import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useC import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue'; import { isDefined } from '~/utils/isDefined'; -import { RecordIndexEventContext } from '@/object-record/record-index/contexts/RecordIndexEventContext'; +import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext'; import { useContext } from 'react'; import { TableHotkeyScope } from '../../types/TableHotkeyScope'; @@ -41,7 +41,7 @@ export type OpenTableCellArgs = { }; export const useOpenRecordTableCellV2 = (tableScopeId: string) => { - const { onIndexIdentifierClick } = useContext(RecordIndexEventContext); + const { onIndexIdentifierClick } = useContext(RecordIndexRootPropsContext); const moveEditModeToTableCellPosition = useMoveEditModeToTableCellPosition(tableScopeId); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowWrapper.tsx index 421c800e2..ef0b399fd 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowWrapper.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowWrapper.tsx @@ -5,7 +5,7 @@ import { useInView } from 'react-intersection-observer'; import { useRecoilValue } from 'recoil'; import { getBasePathToShowPage } from '@/object-metadata/utils/getBasePathToShowPage'; -import { RecordIndexEventContext } from '@/object-record/record-index/contexts/RecordIndexEventContext'; +import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext'; import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext'; import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext'; import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; @@ -24,7 +24,7 @@ export const RecordTableRowWrapper = ({ children: ReactNode; }) => { const { objectMetadataItem } = useContext(RecordTableContext); - const { onIndexRecordsLoaded } = useContext(RecordIndexEventContext); + const { onIndexRecordsLoaded } = useContext(RecordIndexRootPropsContext); const theme = useTheme(); diff --git a/packages/twenty-front/src/modules/ui/input/hooks/useInputFocusWithoutScrollOnMount.ts b/packages/twenty-front/src/modules/ui/input/hooks/useInputFocusWithoutScrollOnMount.ts new file mode 100644 index 000000000..a771bcd6e --- /dev/null +++ b/packages/twenty-front/src/modules/ui/input/hooks/useInputFocusWithoutScrollOnMount.ts @@ -0,0 +1,14 @@ +import { useEffect, useRef } from 'react'; +import { isDefined } from 'twenty-ui'; + +export const useInputFocusWithoutScrollOnMount = () => { + const inputRef = useRef(null); + + useEffect(() => { + if (isDefined(inputRef.current)) { + inputRef.current.focus({ preventScroll: true }); + } + }); + + return { inputRef }; +}; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx index 1c6b06c91..b9f1bc87d 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx @@ -1,5 +1,6 @@ -import { forwardRef, InputHTMLAttributes } from 'react'; +import { useInputFocusWithoutScrollOnMount } from '@/ui/input/hooks/useInputFocusWithoutScrollOnMount'; import styled from '@emotion/styled'; +import { forwardRef, InputHTMLAttributes } from 'react'; import { TEXT_INPUT_STYLE } from 'twenty-ui'; const StyledDropdownMenuSearchInputContainer = styled.div` @@ -35,12 +36,16 @@ const StyledInput = styled.input` export const DropdownMenuSearchInput = forwardRef< HTMLInputElement, InputHTMLAttributes ->(({ value, onChange, autoFocus, placeholder = 'Search', type }, ref) => ( - - - -)); +>(({ value, onChange, placeholder = 'Search', type }) => { + const { inputRef } = useInputFocusWithoutScrollOnMount(); + + return ( + + + + ); +});