diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx index 7cc7d1ac4..887110007 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx @@ -32,7 +32,7 @@ import { SelectableItem } from '@/ui/layout/selectable-list/components/Selectabl import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope'; -import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; +import { useListenClickOutsideV2 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; @@ -414,9 +414,11 @@ export const CommandMenu = () => { cmd.scope === CommandScope.Global, ); - useListenClickOutside({ + useListenClickOutsideV2({ refs: [commandMenuRef], callback: closeCommandMenu, + listenerId: 'COMMAND_MENU_LISTENER_ID', + hotkeyScope: AppHotkeyScope.CommandMenuOpen, }); const isCopilotEnabled = useIsFeatureEnabled('IS_COPILOT_ENABLED'); diff --git a/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutsideV2.ts b/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutsideV2.ts index 0d2f84c05..ace1e9f34 100644 --- a/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutsideV2.ts +++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutsideV2.ts @@ -1,6 +1,7 @@ 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'; export enum ClickOutsideMode { @@ -14,6 +15,7 @@ export type ClickOutsideListenerProps = { callback: (event: MouseEvent | TouchEvent) => void; mode?: ClickOutsideMode; listenerId: string; + hotkeyScope?: string; enabled?: boolean; }; @@ -23,6 +25,7 @@ export const useListenClickOutsideV2 = ({ callback, mode = ClickOutsideMode.compareHTMLRef, listenerId, + hotkeyScope, enabled = true, }: ClickOutsideListenerProps) => { const { @@ -40,7 +43,18 @@ export const useListenClickOutsideV2 = ({ set(getClickOutsideListenerMouseDownHappenedState, true); - const isListening = clickOutsideListenerIsActivated && enabled; + const currentHotkeyScopes = snapshot + .getLoadable(internalHotkeysEnabledScopesState) + .getValue(); + + const isListeningBasedOnHotkeyScope = hotkeyScope + ? currentHotkeyScopes.includes(hotkeyScope) + : true; + + const isListening = + clickOutsideListenerIsActivated && + enabled && + isListeningBasedOnHotkeyScope; if (!isListening) { return; @@ -96,11 +110,12 @@ export const useListenClickOutsideV2 = ({ }, [ getClickOutsideListenerIsActivatedState, + getClickOutsideListenerMouseDownHappenedState, + hotkeyScope, enabled, mode, refs, getClickOutsideListenerIsMouseDownInsideState, - getClickOutsideListenerMouseDownHappenedState, ], ); @@ -111,7 +126,18 @@ export const useListenClickOutsideV2 = ({ .getLoadable(getClickOutsideListenerIsActivatedState) .getValue(); - const isListening = clickOutsideListenerIsActivated && enabled; + const currentHotkeyScopes = snapshot + .getLoadable(internalHotkeysEnabledScopesState) + .getValue(); + + const isListeningBasedOnHotkeyScope = hotkeyScope + ? currentHotkeyScopes.includes(hotkeyScope) + : true; + + const isListening = + clickOutsideListenerIsActivated && + enabled && + isListeningBasedOnHotkeyScope; const isMouseDownInside = snapshot .getLoadable(getClickOutsideListenerIsMouseDownInsideState) @@ -199,6 +225,7 @@ export const useListenClickOutsideV2 = ({ }, [ getClickOutsideListenerIsActivatedState, + hotkeyScope, enabled, getClickOutsideListenerIsMouseDownInsideState, getClickOutsideListenerMouseDownHappenedState,