Scroll to currently softfocus cell (#1008)

* - scroll to currently softfocus cell * - moved useEffect to CellSoftFocus component
twentyhq · Jul 31, 2023 · 700b567 · 700b567
1 parent f111440
commit 700b567
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 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
@@ -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
@@ -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>
   );