houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes hover + focus on same cell (#14580)

Browse Source 
Fixes in https://github.com/twentyhq/core-team-issues/issues/1490: 
- Hover portal missing on task row
This commit is contained in:
Lucas Bordeau
2025-09-18 10:24:34 +02:00
committed by GitHub
parent c582eaea4d
commit ea02b4ffac
1 changed files with 27 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFocusedPortalContent.tsx
+27 -1
View File
@@ -1,9 +1,13 @@
import { FieldDisplay } from '@/object-record/record-field/ui/components/FieldDisplay';
import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext';
import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { RecordTableCellDisplayMode } from '@/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode';
import { isRecordTableRowActiveComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowActiveComponentFamilyState';
import { recordTableFocusPositionComponentState } from '@/object-record/record-table/states/recordTableFocusPositionComponentState';
import { recordTableHoverPositionComponentState } from '@/object-record/record-table/states/recordTableHoverPositionComponentState';
import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue';
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import styled from '@emotion/styled';
import { BORDER_COMMON } from 'twenty-ui/theme';
@@ -27,14 +31,36 @@ const StyledRecordTableCellFocusPortalContent = styled.div<{
export const RecordTableCellFocusedPortalContent = () => {
const { rowIndex } = useRecordTableRowContextOrThrow();
const { onMoveHoverToCurrentCell } = useRecordTableBodyContextOrThrow();
const focusPosition = useRecoilComponentValue(
recordTableFocusPositionComponentState,
);
const isRowActive = useRecoilComponentFamilyValue(
isRecordTableRowActiveComponentFamilyState,
rowIndex,
);
const hoverPosition = useRecoilComponentValue(
recordTableHoverPositionComponentState,
);
const arePositionsDifferent =
hoverPosition?.row !== focusPosition.row ||
hoverPosition?.column !== focusPosition.column;
const handleContainerMouseMove = () => {
if (arePositionsDifferent) {
onMoveHoverToCurrentCell(focusPosition);
}
};
return (
<StyledRecordTableCellFocusPortalContent isRowActive={isRowActive}>
<StyledRecordTableCellFocusPortalContent
isRowActive={isRowActive}
onMouseMove={handleContainerMouseMove}
>
<RecordTableCellDisplayMode>
<FieldDisplay />
</RecordTableCellDisplayMode>