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

Fix record table click outside (#13149)

Browse Source 
Fixes https://github.com/twentyhq/twenty/issues/13139 introduced by
https://github.com/twentyhq/twenty/pull/13127

The record table click outside was triggered when it shouldn't have been
(clicking inside a dropdown in the side panel).
This PR fixes it by checking the type of the focused element before
triggering the click outside.
Before, we had a check on the current hotkey scope but I removed this
part during the refactoring and I didn't replace it thinking that it
wasn't useful anymore.

Video QA:



https://github.com/user-attachments/assets/68baa9e6-2593-4840-923b-d631c806d9ea
This commit is contained in:
Raphaël Bosi
2025-07-10 14:40:05 +02:00
committed by GitHub
parent 4467de1b5c
commit fe9de195c3
2 changed files with 28 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFocusClickOutsideEffect.tsx
View File

@ -5,7 +5,10 @@ import { useRecordTableContextOrThrow } from '@/object-record/record-table/conte
import { useLeaveTableFocus } from '@/object-record/record-table/hooks/internal/useLeaveTableFocus'; import { useLeaveTableFocus } from '@/object-record/record-table/hooks/internal/useLeaveTableFocus';
import { MODAL_BACKDROP_CLICK_OUTSIDE_ID } from '@/ui/layout/modal/constants/ModalBackdropClickOutsideId'; 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 { 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 { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useRecoilValue } from 'recoil';
type RecordTableBodyFocusClickOutsideEffectProps = { type RecordTableBodyFocusClickOutsideEffectProps = {
tableBodyRef: React.RefObject<HTMLDivElement>; tableBodyRef: React.RefObject<HTMLDivElement>;
}; };
@ -17,6 +20,10 @@ export const RecordTableBodyFocusClickOutsideEffect = ({
const leaveTableFocus = useLeaveTableFocus(recordTableId); const leaveTableFocus = useLeaveTableFocus(recordTableId);
const currentFocusedItem = useRecoilValue(currentFocusedItemSelector);
const componentType = currentFocusedItem?.componentInstance.componentType;
useListenClickOutside({ useListenClickOutside({
excludedClickOutsideIds: [ excludedClickOutsideIds: [
ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID, ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID,
@ -27,6 +34,15 @@ export const RecordTableBodyFocusClickOutsideEffect = ({
listenerId: RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID, listenerId: RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID,
refs: [tableBodyRef], refs: [tableBodyRef],
callback: () => { callback: () => {
if (
componentType !== FocusComponentType.PAGE &&
componentType !== FocusComponentType.RECORD_TABLE &&
componentType !== FocusComponentType.RECORD_TABLE_ROW &&
componentType !== FocusComponentType.RECORD_TABLE_CELL
) {
return;
}
leaveTableFocus(); leaveTableFocus();
}, },
}); });

12
packages/twenty-front/src/modules/ui/utilities/focus/states/currentFocusedItemSelector.ts Normal file
View File

@ -0,0 +1,12 @@
import { FocusStackItem } from '@/ui/utilities/focus/types/FocusStackItem';
import { selector } from 'recoil';
import { focusStackState } from './focusStackState';
export const currentFocusedItemSelector = selector<FocusStackItem | undefined>({
key: 'currentFocusedItemSelector',
get: ({ get }) => {
const focusStack = get(focusStackState);
return focusStack.at(-1);
},
});