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 f59ee32a1a..1fd332a356 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 dbed91aab9..d5ea707d9a 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 c11df4434c..8c082df3dc 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 f33ee40ae3..6116a73fc8 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(); }