From 700b567320ea40fcc6ba701ed60008237c900694 Mon Sep 17 00:00:00 2001
From: brendanlaschke <brendan.laschke@googlemail.com>
Date: Tue, 1 Aug 2023 00:50:08 +0200
Subject: [PATCH] Scroll to currently softfocus cell (#1008)

* - scroll to currently softfocus cell

* - moved useEffect to CellSoftFocus component
---
 .../components/EditableCellContainer.tsx           |  4 ++++
 .../components/EditableCellSoftFocusMode.tsx       | 14 ++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

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<HTMLDivElement>;
 };
 
 export const EditableCellDisplayModeOuterContainer = styled.div<
@@ -37,6 +39,7 @@ export function EditableCellDisplayContainer({
   children,
   softFocus,
   onClick,
+  scrollRef,
 }: React.PropsWithChildren<Props>) {
   return (
     <EditableCellDisplayModeOuterContainer
@@ -47,6 +50,7 @@ export function EditableCellDisplayContainer({
       }
       onClick={onClick}
       softFocus={softFocus}
+      ref={scrollRef}
     >
       <EditableCellDisplayModeInnerContainer>
         {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<unknown>;
 export function EditableCellSoftFocusMode({ children }: OwnProps) {
   const { openEditableCell } = useEditableCell();
 
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    scrollRef.current?.scrollIntoView({ block: 'nearest' });
+  });
+
   function openEditMode() {
     openEditableCell();
   }
@@ -52,7 +58,11 @@ export function EditableCellSoftFocusMode({ children }: OwnProps) {
   }
 
   return (
-    <EditableCellDisplayContainer onClick={handleClick} softFocus>
+    <EditableCellDisplayContainer
+      onClick={handleClick}
+      softFocus
+      scrollRef={scrollRef}
+    >
       {children}
     </EditableCellDisplayContainer>
   );