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

Remove hotkey scope from useListenClickOutside (#11098)

Browse Source 
The old `useListenClickOutside` API allowed us to pass a hotkeyScope as
a parameter, the click outside was triggered only if the current hotkey
scope matched the parameter. We don't want this anymore. This fixes a
few bugs related to hotkey scopes inside the side panel.
This commit is contained in:
Raphaël Bosi
2025-03-21 16:27:58 +01:00
committed by GitHub
parent 2c5e3dba60
commit 3328998e61
2 changed files with 2 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
View File

@ -22,7 +22,6 @@ import { RecordFilterGroupsComponentInstanceContext } from '@/object-record/reco
import { RecordFiltersComponentInstanceContext } from '@/object-record/record-filter/states/context/RecordFiltersComponentInstanceContext';
import { RecordSortsComponentInstanceContext } from '@/object-record/record-sort/states/context/RecordSortsComponentInstanceContext';
import { getRecordIndexIdFromObjectNamePluralAndViewId } from '@/object-record/utils/getRecordIndexIdFromObjectNamePluralAndViewId';
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
@ -70,7 +69,6 @@ export const CommandMenuContainer = ({
refs: [commandMenuRef],
callback: closeCommandMenu,
listenerId: 'COMMAND_MENU_LISTENER_ID',
hotkeyScope: AppHotkeyScope.CommandMenuOpen,
excludeClassNames: ['page-header-command-menu-button'],
});

32
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts
View File

@ -1,7 +1,6 @@
import React, { useEffect } from 'react';
import { useRecoilCallback } from 'recoil';
import { internalHotkeysEnabledScopesState } from '@/ui/utilities/hotkey/states/internal/internalHotkeysEnabledScopesState';
import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
const CLICK_OUTSIDE_DEBUG_MODE = false;
@ -17,7 +16,6 @@ export type ClickOutsideListenerProps<T extends Element> = {
callback: (event: MouseEvent | TouchEvent) => void;
mode?: ClickOutsideMode;
listenerId: string;
hotkeyScope?: string;
enabled?: boolean;
};
@ -27,7 +25,6 @@ export const useListenClickOutside = <T extends Element>({
callback,
mode = ClickOutsideMode.compareHTMLRef,
listenerId,
hotkeyScope,
enabled = true,
}: ClickOutsideListenerProps<T>) => {
const {
@ -45,18 +42,7 @@ export const useListenClickOutside = <T extends Element>({
set(getClickOutsideListenerMouseDownHappenedState, true);
const currentHotkeyScopes = snapshot
.getLoadable(internalHotkeysEnabledScopesState)
.getValue();
const isListeningBasedOnHotkeyScope = hotkeyScope
? currentHotkeyScopes.includes(hotkeyScope)
: true;
const isListening =
clickOutsideListenerIsActivated &&
enabled &&
isListeningBasedOnHotkeyScope;
const isListening = clickOutsideListenerIsActivated && enabled;
if (!isListening) {
return;
@ -121,7 +107,6 @@ export const useListenClickOutside = <T extends Element>({
[
getClickOutsideListenerIsActivatedState,
getClickOutsideListenerMouseDownHappenedState,
hotkeyScope,
enabled,
mode,
refs,
@ -136,18 +121,7 @@ export const useListenClickOutside = <T extends Element>({
.getLoadable(getClickOutsideListenerIsActivatedState)
.getValue();
const currentHotkeyScopes = snapshot
.getLoadable(internalHotkeysEnabledScopesState)
.getValue();
const isListeningBasedOnHotkeyScope = hotkeyScope
? currentHotkeyScopes.includes(hotkeyScope)
: true;
const isListening =
clickOutsideListenerIsActivated &&
enabled &&
isListeningBasedOnHotkeyScope;
const isListening = clickOutsideListenerIsActivated && enabled;
const isMouseDownInside = snapshot
.getLoadable(getClickOutsideListenerIsMouseDownInsideState)
@ -241,7 +215,6 @@ export const useListenClickOutside = <T extends Element>({
isListening,
hasMouseDownHappened,
isClickedOnExcluded,
hotkeyScope,
enabled,
event,
});
@ -254,7 +227,6 @@ export const useListenClickOutside = <T extends Element>({
},
[
getClickOutsideListenerIsActivatedState,
hotkeyScope,
enabled,
getClickOutsideListenerIsMouseDownInsideState,
getClickOutsideListenerMouseDownHappenedState,