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 9a5fdc837..31a602504 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 @@ -5,7 +5,10 @@ import { useRecordTableContextOrThrow } from '@/object-record/record-table/conte import { useLeaveTableFocus } from '@/object-record/record-table/hooks/internal/useLeaveTableFocus'; import { MODAL_BACKDROP_CLICK_OUTSIDE_ID } from '@/ui/layout/modal/constants/ModalBackdropClickOutsideId'; import { PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID } from '@/ui/layout/page/constants/PageActionContainerClickOutsideId'; +import { currentFocusedItemSelector } from '@/ui/utilities/focus/states/currentFocusedItemSelector'; +import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; +import { useRecoilValue } from 'recoil'; type RecordTableBodyFocusClickOutsideEffectProps = { tableBodyRef: React.RefObject; }; @@ -17,6 +20,10 @@ export const RecordTableBodyFocusClickOutsideEffect = ({ const leaveTableFocus = useLeaveTableFocus(recordTableId); + const currentFocusedItem = useRecoilValue(currentFocusedItemSelector); + + const componentType = currentFocusedItem?.componentInstance.componentType; + useListenClickOutside({ excludedClickOutsideIds: [ ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID, @@ -27,6 +34,15 @@ export const RecordTableBodyFocusClickOutsideEffect = ({ listenerId: RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID, refs: [tableBodyRef], callback: () => { + if ( + componentType !== FocusComponentType.PAGE && + componentType !== FocusComponentType.RECORD_TABLE && + componentType !== FocusComponentType.RECORD_TABLE_ROW && + componentType !== FocusComponentType.RECORD_TABLE_CELL + ) { + return; + } + leaveTableFocus(); }, }); diff --git a/packages/twenty-front/src/modules/ui/utilities/focus/states/currentFocusedItemSelector.ts b/packages/twenty-front/src/modules/ui/utilities/focus/states/currentFocusedItemSelector.ts new file mode 100644 index 000000000..e532fac86 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/utilities/focus/states/currentFocusedItemSelector.ts @@ -0,0 +1,12 @@ +import { FocusStackItem } from '@/ui/utilities/focus/types/FocusStackItem'; +import { selector } from 'recoil'; +import { focusStackState } from './focusStackState'; + +export const currentFocusedItemSelector = selector({ + key: 'currentFocusedItemSelector', + get: ({ get }) => { + const focusStack = get(focusStackState); + + return focusStack.at(-1); + }, +});