From 342583e8917dad6cfb5fcf76555fe758ceb7067d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?= <71827178+bosiraphael@users.noreply.github.com> Date: Thu, 22 May 2025 11:13:20 +0200 Subject: [PATCH] Fix stacking multiple time the same record in the side panel (#12192) Fixes #12043 This bug had two distinct root causes: - The command menu closing wasn't triggering correctly because of a hotkey scope issue. We reset the hotkey scope to record index inside `useLeaveTableFocus` but we should do it only when needed - The portal on top of the table cell didn't stop the propagation of the click so the table cell was opened twice (once in the portal and once in the underlying cell) Before: https://github.com/user-attachments/assets/16c41135-fff9-4f89-a512-6a7c0e143190 After: https://github.com/user-attachments/assets/865b6063-5f82-4f44-b0c8-d03f5955d685 --- .../record-table/hooks/internal/useLeaveTableFocus.ts | 6 ------ .../components/RecordTableBodyFocusClickOutsideEffect.tsx | 4 ++++ .../components/RecordTableCellDisplayContainer.tsx | 2 +- .../components/RecordTableCellDisplayMode.tsx | 3 ++- 4 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts index f59ee32a1..1fd332a35 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts @@ -1,11 +1,9 @@ -import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope'; import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection'; import { useActiveRecordTableRow } from '@/object-record/record-table/hooks/useActiveRecordTableRow'; import { useFocusedRecordTableRow } from '@/object-record/record-table/hooks/useFocusedRecordTableRow'; import { useSetIsRecordTableFocusActive } from '@/object-record/record-table/record-table-cell/hooks/useSetIsRecordTableFocusActive'; import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext'; import { recordTableHoverPositionComponentState } from '@/object-record/record-table/states/recordTableHoverPositionComponentState'; -import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; @@ -36,8 +34,6 @@ export const useLeaveTableFocus = (recordTableId?: string) => { recordTableIdFromContext, ); - const setHotkeyScope = useSetHotkeyScope(); - return () => { resetTableRowSelection(); @@ -48,7 +44,5 @@ export const useLeaveTableFocus = (recordTableId?: string) => { deactivateRecordTableRow(); setRecordTableHoverPosition(null); - - setHotkeyScope(RecordIndexHotkeyScope.RecordIndex); }; }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFocusClickOutsideEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFocusClickOutsideEffect.tsx index dbed91aab..d5ea707d9 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFocusClickOutsideEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFocusClickOutsideEffect.tsx @@ -3,6 +3,7 @@ import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-t import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext'; import { useLeaveTableFocus } from '@/object-record/record-table/hooks/internal/useLeaveTableFocus'; import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope'; +import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; import { useRecoilValue } from 'recoil'; @@ -19,6 +20,8 @@ export const RecordTableBodyFocusClickOutsideEffect = ({ const currentHotkeyScope = useRecoilValue(currentHotkeyScopeState); + const setHotkeyScope = useSetHotkeyScope(); + useListenClickOutside({ excludeClassNames: [ 'bottom-bar', @@ -38,6 +41,7 @@ export const RecordTableBodyFocusClickOutsideEffect = ({ } leaveTableFocus(); + setHotkeyScope(RecordIndexHotkeyScope.RecordIndex); }, }); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx index c11df4434..8c082df3d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx @@ -27,7 +27,7 @@ const StyledEmptyPlaceholderField = withTheme(styled.div<{ theme: Theme }>` export type EditableCellDisplayContainerProps = { focus?: boolean; - onClick?: () => void; + onClick?: (event: React.MouseEvent) => void; scrollRef?: Ref; isHovered?: boolean; onContextMenu?: (event: React.MouseEvent) => void; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx index f33ee40ae..6116a73fc 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx @@ -22,7 +22,8 @@ export const RecordTableCellDisplayMode = ({ onActionMenuDropdownOpened(event, recordId); }; - const handleClick = () => { + const handleClick = (event: React.MouseEvent) => { + event.stopPropagation(); if (!isFieldInputOnly && !isReadOnly) { openTableCell(); }