twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-23 22:12:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fixed soft focus stuck (#5639)

Browse Source 
Soft focus could be stuck when exiting edit mode, in some cases it would
prevent to have soft focus if just moving the mouse into a cell.
This commit is contained in:
Lucas Bordeau 2024-06-11 12:31:50 +02:00 committed by GitHub
parent 25a38dc693
commit 8a88bf41dd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useHandleContainerMouseEnter.ts
View File

@ -2,6 +2,7 @@ import { useRecoilCallback } from 'recoil';
import { useMoveSoftFocusToCellOnHoverV2 } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCellOnHoverV2';
import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
@ -11,8 +12,6 @@ import { extractComponentFamilyState } from '@/ui/utilities/state/component-stat
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
export type HandleContainerMouseEnterArgs = {
isHovered: boolean;
setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
cellPosition: TableCellPosition;
};
@ -28,16 +27,22 @@ export const useHandleContainerMouseEnter = ({
const handleContainerMouseEnter = useRecoilCallback(
({ snapshot, set }) =>
({
isHovered,
setIsHovered,
cellPosition,
}: HandleContainerMouseEnterArgs) => {
({ cellPosition }: HandleContainerMouseEnterArgs) => {
const currentTableCellInEditModePositionState = extractComponentState(
currentTableCellInEditModePositionComponentState,
tableScopeId,
);
const isSoftFocusOnTableCellFamilyState = extractComponentFamilyState(
isSoftFocusOnTableCellComponentFamilyState,
tableScopeId,
);
const isSoftFocusOnTableCell = getSnapshotValue(
snapshot,
isSoftFocusOnTableCellFamilyState(cellPosition),
);
const currentTableCellInEditModePosition = getSnapshotValue(
snapshot,
currentTableCellInEditModePositionState,
@ -53,8 +58,7 @@ export const useHandleContainerMouseEnter = ({
isTableCellInEditModeFamilyState(currentTableCellInEditModePosition),
);
if (!isHovered && !isSomeCellInEditMode) {
setIsHovered(true);
if (!isSomeCellInEditMode && !isSoftFocusOnTableCell) {
moveSoftFocusToCell(cellPosition);
set(isSoftFocusUsingMouseState, true);
}

20
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx
View File

@ -5,6 +5,7 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext
import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { RecordTableCellSoftFocusMode } from '@/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode';
import { useCurrentTableCellPosition } from '@/object-record/record-table/record-table-cell/hooks/useCurrentCellPosition';
import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@ -14,7 +15,6 @@ import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { RecordTableCellDisplayMode } from './RecordTableCellDisplayMode';
import { RecordTableCellEditMode } from './RecordTableCellEditMode';
import { RecordTableCellSoftFocusMode } from './RecordTableCellSoftFocusMode';
import styles from './RecordTableCellContainer.module.css';
@ -49,7 +49,6 @@ export const RecordTableCellContainer = ({
const shouldBeInitiallyInEditMode =
isPendingRow === true && isLabelIdentifier;
const [isHovered, setIsHovered] = useState(false);
const [hasSoftFocus, setHasSoftFocus] = useState(false);
const [isInEditMode, setIsInEditMode] = useState(shouldBeInitiallyInEditMode);
@ -59,18 +58,25 @@ export const RecordTableCellContainer = ({
onContextMenu(event, recordId);
};
const handleContainerMouseMove = () => {
if (!hasSoftFocus) {
onCellMouseEnter({
cellPosition,
});
}
};
const handleContainerMouseEnter = () => {
if (!hasSoftFocus) {
onCellMouseEnter({
cellPosition,
isHovered,
setIsHovered,
});
}
};
const handleContainerMouseLeave = () => {
setIsHovered(false);
setHasSoftFocus(false);
setIsFocused(false);
};
const handleContainerClick = () => {
@ -81,6 +87,8 @@ export const RecordTableCellContainer = ({
useEffect(() => {
const customEventListener = (event: any) => {
event.stopPropagation();
const newHasSoftFocus = event.detail;
setHasSoftFocus(newHasSoftFocus);
@ -136,7 +144,7 @@ export const RecordTableCellContainer = ({
<div
onMouseEnter={handleContainerMouseEnter}
onMouseLeave={handleContainerMouseLeave}
onMouseMove={handleContainerMouseEnter}
onMouseMove={handleContainerMouseMove}
onClick={handleContainerClick}
className={clsx({
[styles.cellBaseContainer]: true,