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

Fix side panel click outside (#12011)

Browse Source 
Fixes https://github.com/twentyhq/twenty/issues/11988

## Description

The issue came from `RecordTableBodyFocusClickOutsideEffect`.
When clicking outside the table with the side panel opened, two click
outside listeners were triggered: the one which closes the side panel
and the one which leaves the table focus. There was a race condition and
the leave table focus was executed first, changing the hotkey scope. The
side panel closure wasn't executed because the hotkey scope was wrong.

## Fix
Only leave the table focus if the hotkey scope is `TableFocus`


## Videos

Before:


https://github.com/user-attachments/assets/0ea666a6-c212-4b94-b89b-49211d18a13b


After:


https://github.com/user-attachments/assets/2ec6d593-ff65-4cbf-ac92-a0cfbd7dfd8b
This commit is contained in:
Raphaël Bosi
2025-05-13 17:56:04 +02:00
committed by GitHub
parent 3efdbed5d1
commit dfe8011948
1 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,10 @@
import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
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 { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useRecoilValue } from 'recoil';
type RecordTableBodyFocusClickOutsideEffectProps = {
tableBodyRef: React.RefObject<HTMLDivElement>;
};
@ -14,6 +16,8 @@ export const RecordTableBodyFocusClickOutsideEffect = ({
const leaveTableFocus = useLeaveTableFocus(recordTableId);
const currentHotkeyScope = useRecoilValue(currentHotkeyScopeState);
useListenClickOutside({
excludeClassNames: [
'bottom-bar',
@ -25,6 +29,10 @@ export const RecordTableBodyFocusClickOutsideEffect = ({
listenerId: RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID,
refs: [tableBodyRef],
callback: () => {
if (currentHotkeyScope.scope !== TableHotkeyScope.TableFocus) {
return;
}
leaveTableFocus();
},
});