From 0060a9ea577e07f597225f698c615905dc0607c1 Mon Sep 17 00:00:00 2001
From: Anoop P <44577841+anoopw3bdev@users.noreply.github.com>
Date: Mon, 26 Feb 2024 01:59:03 +0530
Subject: [PATCH] fix: prevent scroll to softfocus cell when hover (#3990)

---
 .../object-record/record-table/hooks/useRecordTable.ts |  7 +++++++
 .../components/RecordTableCellContainer.tsx            |  8 +++++++-
 .../components/RecordTableCellSoftFocusMode.tsx        | 10 ++++++++--
 .../record-table/states/isSoftFocusUsingMouseState.ts  |  6 ++++++
 4 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts

diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts
index bde61bd66..2941893c6 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts
@@ -5,6 +5,7 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'
 import { useGetIsSomeCellInEditModeState } from '@/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode';
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
 import { useRecordTableMoveFocus } from '@/object-record/record-table/hooks/useRecordTableMoveFocus';
+import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
@@ -126,6 +127,10 @@ export const useRecordTable = (props?: useRecordTableProps) => {
     const disableSoftFocus = useDisableSoftFocus(recordTableId);
     const setHotkeyScope = useSetHotkeyScope();
 
+    const setIsSoftFocusUsingMouseState = useSetRecoilState(
+      isSoftFocusUsingMouseState,
+    );
+
     useScopedHotkeys(
       [Key.ArrowUp, `${Key.Shift}+${Key.Enter}`],
       () => {
@@ -148,6 +153,7 @@ export const useRecordTable = (props?: useRecordTableProps) => {
       [Key.ArrowLeft, `${Key.Shift}+${Key.Tab}`],
       () => {
         moveLeft();
+        setIsSoftFocusUsingMouseState(false);
       },
       TableHotkeyScope.TableSoftFocus,
       [moveLeft],
@@ -157,6 +163,7 @@ export const useRecordTable = (props?: useRecordTableProps) => {
       [Key.ArrowRight, Key.Tab],
       () => {
         moveRight();
+        setIsSoftFocusUsingMouseState(false);
       },
       TableHotkeyScope.TableSoftFocus,
       [moveRight],
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx
index 251b5b141..344988c94 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx
@@ -1,6 +1,6 @@
 import { ReactElement, useContext, useState } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { useGetButtonIcon } from '@/object-record/record-field/hooks/useGetButtonIcon';
 import { useIsFieldEmpty } from '@/object-record/record-field/hooks/useIsFieldEmpty';
@@ -8,6 +8,7 @@ import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFie
 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
 import { useGetIsSomeCellInEditModeState } from '@/object-record/record-table/hooks/internal/useGetIsSomeCellInEditMode';
 import { useOpenRecordTableCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCell';
+import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
 import { IconArrowUpRight } from '@/ui/display/icon';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
@@ -62,6 +63,10 @@ export const RecordTableCellContainer = ({
   const isSomeCellInEditModeState = useGetIsSomeCellInEditModeState();
   const isSomeCellInEditMode = useRecoilValue(isSomeCellInEditModeState());
 
+  const setIsSoftFocusUsingMouseState = useSetRecoilState(
+    isSoftFocusUsingMouseState,
+  );
+
   const moveSoftFocusToCurrentCellOnHover =
     useMoveSoftFocusToCurrentCellOnHover();
 
@@ -79,6 +84,7 @@ export const RecordTableCellContainer = ({
     if (!isHovered && !isSomeCellInEditMode) {
       setIsHovered(true);
       moveSoftFocusToCurrentCellOnHover();
+      setIsSoftFocusUsingMouseState(true);
     }
   };
 
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx
index 9de63cf65..7c6947aa5 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx
@@ -1,9 +1,11 @@
 import { PropsWithChildren, useEffect, useRef } from 'react';
+import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 
 import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFieldInputOnly';
 import { useToggleEditOnlyInput } from '@/object-record/record-field/hooks/useToggleEditOnlyInput';
 import { useOpenRecordTableCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCell';
+import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey';
 
@@ -22,9 +24,13 @@ export const RecordTableCellSoftFocusMode = ({
   const toggleEditOnlyInput = useToggleEditOnlyInput();
   const scrollRef = useRef<HTMLDivElement>(null);
 
+  const isSoftFocusUsingMouse = useRecoilValue(isSoftFocusUsingMouseState);
+
   useEffect(() => {
-    scrollRef.current?.scrollIntoView({ block: 'nearest' });
-  }, []);
+    if (!isSoftFocusUsingMouse) {
+      scrollRef.current?.scrollIntoView({ block: 'nearest' });
+    }
+  }, [isSoftFocusUsingMouse]);
 
   useScopedHotkeys(
     [Key.Backspace, Key.Delete],
diff --git a/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts
new file mode 100644
index 000000000..7895269f9
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-table/states/isSoftFocusUsingMouseState.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const isSoftFocusUsingMouseState = atom({
+  key: 'isSoftFocusUsingMouseState',
+  default: false,
+});