diff --git a/front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx b/front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx index 8960537889..44db13684b 100644 --- a/front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx +++ b/front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx @@ -1,8 +1,10 @@ +import { Ref } from 'react'; import styled from '@emotion/styled'; type Props = { softFocus?: boolean; onClick?: () => void; + scrollRef?: Ref; }; export const EditableCellDisplayModeOuterContainer = styled.div< @@ -37,6 +39,7 @@ export function EditableCellDisplayContainer({ children, softFocus, onClick, + scrollRef, }: React.PropsWithChildren) { return ( {children} diff --git a/front/src/modules/ui/table/editable-cell/components/EditableCellSoftFocusMode.tsx b/front/src/modules/ui/table/editable-cell/components/EditableCellSoftFocusMode.tsx index bfac7d8723..03da95fbb2 100644 --- a/front/src/modules/ui/table/editable-cell/components/EditableCellSoftFocusMode.tsx +++ b/front/src/modules/ui/table/editable-cell/components/EditableCellSoftFocusMode.tsx @@ -1,4 +1,4 @@ -import { PropsWithChildren } from 'react'; +import { PropsWithChildren, useEffect, useRef } from 'react'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey'; @@ -13,6 +13,12 @@ type OwnProps = PropsWithChildren; export function EditableCellSoftFocusMode({ children }: OwnProps) { const { openEditableCell } = useEditableCell(); + const scrollRef = useRef(null); + + useEffect(() => { + scrollRef.current?.scrollIntoView({ block: 'nearest' }); + }); + function openEditMode() { openEditableCell(); } @@ -52,7 +58,11 @@ export function EditableCellSoftFocusMode({ children }: OwnProps) { } return ( - + {children} );