diff --git a/front/src/modules/ui/data-table/hooks/useGetIsSomeCellInEditMode.ts b/front/src/modules/ui/data-table/hooks/useGetIsSomeCellInEditMode.ts
new file mode 100644
index 000000000..60ebb6f16
--- /dev/null
+++ b/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;
+ },
+ [],
+ );
+};
diff --git a/front/src/modules/ui/data-table/hooks/useMoveSoftFocusToCurrentCellOnHover.ts b/front/src/modules/ui/data-table/hooks/useMoveSoftFocusToCurrentCellOnHover.ts
new file mode 100644
index 000000000..fc1bc34f9
--- /dev/null
+++ b/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],
+ );
+};
diff --git a/front/src/modules/ui/data-table/table-cell/components/TableCellContainer.tsx b/front/src/modules/ui/data-table/table-cell/components/TableCellContainer.tsx
index b3910b44b..e5bac6f0a 100644
--- a/front/src/modules/ui/data-table/table-cell/components/TableCellContainer.tsx
+++ b/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 &&
- isHovered &&
+ !!buttonIcon &&
+ hasSoftFocus &&
!isCurrentTableCellInEditMode &&
!editModeContentOnly &&
(!isFirstColumnCell || !isEmpty);
- const hasSoftFocus = useIsSoftFocusOnCurrentTableCell();
-
return (
)}
-
+
{editModeContentOnly ? editModeContent : nonEditModeContent}
>
diff --git a/front/src/modules/ui/data-table/table-cell/components/TableCellDisplayContainer.tsx b/front/src/modules/ui/data-table/table-cell/components/TableCellDisplayContainer.tsx
index be1c5b66e..c6d156817 100644
--- a/front/src/modules/ui/data-table/table-cell/components/TableCellDisplayContainer.tsx
+++ b/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) => (
diff --git a/front/src/modules/ui/data-table/table-cell/components/TableCellDisplayMode.tsx b/front/src/modules/ui/data-table/table-cell/components/TableCellDisplayMode.tsx
index 0ceb6d4a0..1054f22d8 100644
--- a/front/src/modules/ui/data-table/table-cell/components/TableCellDisplayMode.tsx
+++ b/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 & { isHovered?: boolean }) => {
+}: React.PropsWithChildren) => {
const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentTableCell();
const isFieldInputOnly = useIsFieldInputOnly();
@@ -24,7 +23,7 @@ export const TableCellDisplayMode = ({
};
return (
-
+
{children}
);
diff --git a/front/src/modules/ui/utilities/drag-select/hooks/useDragSelect.ts b/front/src/modules/ui/utilities/drag-select/hooks/useDragSelect.ts
index adba31fff..fb9c21a75 100644
--- a/front/src/modules/ui/utilities/drag-select/hooks/useDragSelect.ts
+++ b/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,
);