Demo new onclick behavior

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');

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<T extends Element> = {
   callback: (event: MouseEvent | TouchEvent) => void;
   mode?: ClickOutsideMode;
   listenerId: string;
+  hotkeyScope?: string;
   enabled?: boolean;
 };
 
@@ -23,6 +25,7 @@ export const useListenClickOutsideV2 = <T extends Element>({
   callback,
   mode = ClickOutsideMode.compareHTMLRef,
   listenerId,
+  hotkeyScope,
   enabled = true,
 }: ClickOutsideListenerProps<T>) => {
   const {
@@ -40,7 +43,18 @@ export const useListenClickOutsideV2 = <T extends Element>({
 
         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 = <T extends Element>({
       },
     [
       getClickOutsideListenerIsActivatedState,
+      getClickOutsideListenerMouseDownHappenedState,
+      hotkeyScope,
       enabled,
       mode,
       refs,
       getClickOutsideListenerIsMouseDownInsideState,
-      getClickOutsideListenerMouseDownHappenedState,
     ],
   );
 
@@ -111,7 +126,18 @@ export const useListenClickOutsideV2 = <T extends Element>({
           .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 = <T extends Element>({
       },
     [
       getClickOutsideListenerIsActivatedState,
+      hotkeyScope,
       enabled,
       getClickOutsideListenerIsMouseDownInsideState,
       getClickOutsideListenerMouseDownHappenedState,