Two cells can be focused at the same time in the tables Fixes #1826 (#1866)

Co-authored-by: kramer <david.kramer@gmail.com>
Co-authored-by: Ayush Agrawal <54364088+AyushAgrawal-A2@users.noreply.github.com>
Co-authored-by: AyushAgrawal-A2 <ayushagl06@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

front/src/modules/ui/data-table/hooks/useGetIsSomeCellInEditMode.ts

@@ -0,0 +1,26 @@
+import { useRecoilCallback } from 'recoil';
+
+import { currentTableCellInEditModePositionState } from '../states/currentTableCellInEditModePositionState';
+import { isTableCellInEditModeFamilyState } from '../states/isTableCellInEditModeFamilyState';
+
+export const useGetIsSomeCellInEditMode = () => {
+  return useRecoilCallback(
+    ({ snapshot }) =>
+      () => {
+        const currentTableCellInEditModePosition = snapshot
+          .getLoadable(currentTableCellInEditModePositionState)
+          .valueOrThrow();
+
+        const isSomeCellInEditMode = snapshot
+          .getLoadable(
+            isTableCellInEditModeFamilyState(
+              currentTableCellInEditModePosition,
+            ),
+          )
+          .valueOrThrow();
+
+        return isSomeCellInEditMode;
+      },
+    [],
+  );
+};

front/src/modules/ui/data-table/hooks/useMoveSoftFocusToCurrentCellOnHover.ts

@@ -0,0 +1,27 @@
+import { useRecoilCallback } from 'recoil';
+
+import { currentTableCellInEditModePositionState } from '../states/currentTableCellInEditModePositionState';
+import { isTableCellInEditModeFamilyState } from '../states/isTableCellInEditModeFamilyState';
+import { useSetSoftFocusOnCurrentTableCell } from '../table-cell/hooks/useSetSoftFocusOnCurrentTableCell';
+
+export const useMoveSoftFocusToCurrentCellOnHover = () => {
+  const setSoftFocusOnCurrentTableCell = useSetSoftFocusOnCurrentTableCell();
+
+  return useRecoilCallback(
+    ({ snapshot }) =>
+      () => {
+        const currentTableCellInEditModePosition = snapshot
+          .getLoadable(currentTableCellInEditModePositionState)
+          .valueOrThrow();
+
+        const isSomeCellInEditMode = snapshot.getLoadable(
+          isTableCellInEditModeFamilyState(currentTableCellInEditModePosition),
+        );
+
+        if (!isSomeCellInEditMode.contents) {
+          setSoftFocusOnCurrentTableCell();
+        }
+      },
+    [setSoftFocusOnCurrentTableCell],
+  );
+};

front/src/modules/ui/data-table/table-cell/components/TableCellContainer.tsx

@@ -8,6 +8,8 @@ import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';
 import { ColumnIndexContext } from '../../contexts/ColumnIndexContext';
+import { useGetIsSomeCellInEditMode } from '../../hooks/useGetIsSomeCellInEditMode';
+import { useMoveSoftFocusToCurrentCellOnHover } from '../../hooks/useMoveSoftFocusToCurrentCellOnHover';
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 import { useCurrentTableCellEditMode } from '../hooks/useCurrentTableCellEditMode';
 import { useIsSoftFocusOnCurrentTableCell } from '../hooks/useIsSoftFocusOnCurrentTableCell';
@@ -58,8 +60,15 @@ export const TableCellContainer = ({
 }: TableCellContainerProps) => {
   const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode();
 
+  const getIsSomeCellInEditMode = useGetIsSomeCellInEditMode();
+
   const [isHovered, setIsHovered] = useState(false);
 
+  const moveSoftFocusToCurrentCellOnHover =
+    useMoveSoftFocusToCurrentCellOnHover();
+
+  const hasSoftFocus = useIsSoftFocusOnCurrentTableCell();
+
   const setSoftFocusOnCurrentTableCell = useSetSoftFocusOnCurrentTableCell();
 
   const { openTableCell } = useTableCell();
@@ -70,7 +79,12 @@ export const TableCellContainer = ({
   };
 
   const handleContainerMouseEnter = () => {
-    setIsHovered(true);
+    const isSomeCellInEditMode = getIsSomeCellInEditMode();
+
+    if (!isHovered && !isSomeCellInEditMode) {
+      setIsHovered(true);
+      moveSoftFocusToCurrentCellOnHover();
+    }
   };
 
   const handleContainerMouseLeave = () => {
@@ -84,14 +98,12 @@ export const TableCellContainer = ({
   const isEmpty = useIsFieldEmpty();
 
   const showButton =
-    buttonIcon &&
+    !!buttonIcon &&
-    isHovered &&
+    hasSoftFocus &&
     !isCurrentTableCellInEditMode &&
     !editModeContentOnly &&
     (!isFirstColumnCell || !isEmpty);
 
-  const hasSoftFocus = useIsSoftFocusOnCurrentTableCell();
-
   return (
     <CellHotkeyScopeContext.Provider
       value={editHotkeyScope ?? DEFAULT_CELL_SCOPE}
@@ -123,7 +135,7 @@ export const TableCellContainer = ({
             {showButton && (
               <TableCellButton onClick={handleButtonClick} Icon={buttonIcon} />
             )}
-            <TableCellDisplayMode isHovered={isHovered}>
+            <TableCellDisplayMode>
               {editModeContentOnly ? editModeContent : nonEditModeContent}
             </TableCellDisplayMode>
           </>

front/src/modules/ui/data-table/table-cell/components/TableCellDisplayContainer.tsx

@@ -19,7 +19,7 @@ const StyledEditableCellDisplayModeOuterContainer = styled.div<
   padding-right: ${({ theme }) => theme.spacing(1)};
   width: 100%;
   ${(props) =>
-    props.softFocus || props.isHovered
+    props.softFocus
       ? `background: ${props.theme.background.transparent.secondary};
       border-radius: ${props.theme.border.radius.sm};
       outline: 1px solid ${props.theme.font.color.extraLight};`
@@ -39,14 +39,12 @@ export const TableCellDisplayContainer = ({
   softFocus,
   onClick,
   scrollRef,
-  isHovered,
 }: React.PropsWithChildren<EditableCellDisplayContainerProps>) => (
   <StyledEditableCellDisplayModeOuterContainer
     data-testid={
       softFocus ? 'editable-cell-soft-focus-mode' : 'editable-cell-display-mode'
     }
     onClick={onClick}
-    isHovered={isHovered}
     softFocus={softFocus}
     ref={scrollRef}
   >

front/src/modules/ui/data-table/table-cell/components/TableCellDisplayMode.tsx

@@ -7,8 +7,7 @@ import { TableCellDisplayContainer } from './TableCellDisplayContainer';
 
 export const TableCellDisplayMode = ({
   children,
-  isHovered,
+}: React.PropsWithChildren<unknown>) => {
-}: React.PropsWithChildren<unknown> & { isHovered?: boolean }) => {
   const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentTableCell();
 
   const isFieldInputOnly = useIsFieldInputOnly();
@@ -24,7 +23,7 @@ export const TableCellDisplayMode = ({
   };
 
   return (
-    <TableCellDisplayContainer isHovered={isHovered} onClick={handleClick}>
+    <TableCellDisplayContainer onClick={handleClick}>
       {children}
     </TableCellDisplayContainer>
   );

front/src/modules/ui/utilities/drag-select/hooks/useDragSelect.ts

@@ -1,9 +1,9 @@
-import { useRecoilCallback, useRecoilState } from 'recoil';
+import { useRecoilCallback, useSetRecoilState } from 'recoil';
 
 import { isDragSelectionStartEnabledState } from '../states/internal/isDragSelectionStartEnabledState';
 
 export const useDragSelect = () => {
-  const [, setIsDragSelectionStartEnabled] = useRecoilState(
+  const setIsDragSelectionStartEnabled = useSetRecoilState(
     isDragSelectionStartEnabledState,
   );