Fixed hotkey bug with Select component and added debug logs for hotkeys (#4879)

- Select component was adding a duplicate useListenClickOutside already
present in useDropdown for closing dropdown.
- Added debug logs for hotkeys scopes

packages/twenty-front/src/modules/ui/input/components/Select.tsx

@@ -10,7 +10,6 @@ import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/Dropdow
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
 
 import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
 
@@ -113,15 +112,6 @@ export const Select = <Value extends string | number | null>({
 
   const { closeDropdown } = useDropdown(dropdownId);
 
-  const { useListenClickOutside } = useClickOutsideListener(dropdownId);
-
-  useListenClickOutside({
-    refs: [selectContainerRef],
-    callback: () => {
-      closeDropdown();
-    },
-  });
-
   const selectControl = (
     <StyledControlContainer disabled={isDisabled}>
       <StyledControlLabel>

packages/twenty-front/src/modules/ui/input/components/TextInput.tsx

@@ -145,6 +145,7 @@ const TextInputComponent = (
 
   const handleFocus: FocusEventHandler<HTMLInputElement> = (e) => {
     onFocus?.(e);
+
     if (!disableHotkeys) {
       setHotkeyScopeAndMemorizePreviousScope(InputHotkeyScope.TextInput);
     }
@@ -152,6 +153,7 @@ const TextInputComponent = (
 
   const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
     onBlur?.(e);
+
     if (!disableHotkeys) {
       goBackToPreviousHotkeyScope();
     }

packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/usePreviousHotkeyScope.ts

@@ -1,5 +1,8 @@
 import { useRecoilCallback } from 'recoil';
 
+import { DEBUG_HOTKEY_SCOPE } from '@/ui/utilities/hotkey/hooks/useScopedHotkeyCallback';
+import { logDebug } from '~/utils/logDebug';
+
 import { currentHotkeyScopeState } from '../states/internal/currentHotkeyScopeState';
 import { previousHotkeyScopeState } from '../states/internal/previousHotkeyScopeState';
 import { CustomHotkeyScopes } from '../types/CustomHotkeyScope';
@@ -20,6 +23,11 @@ export const usePreviousHotkeyScope = () => {
           return;
         }
 
+        // eslint-disable-next-line @nx/workspace-explicit-boolean-predicates-in-if
+        if (DEBUG_HOTKEY_SCOPE) {
+          logDebug('DEBUG: goBackToPreviousHotkeyScope', previousHotkeyScope);
+        }
+
         setHotkeyScope(
           previousHotkeyScope.scope,
           previousHotkeyScope.customScopes,
@@ -37,6 +45,15 @@ export const usePreviousHotkeyScope = () => {
           .getLoadable(currentHotkeyScopeState)
           .getValue();
 
+        // eslint-disable-next-line @nx/workspace-explicit-boolean-predicates-in-if
+        if (DEBUG_HOTKEY_SCOPE) {
+          logDebug('DEBUG: setHotkeyScopeAndMemorizePreviousScope', {
+            currentHotkeyScope,
+            scope,
+            customScopes,
+          });
+        }
+
         setHotkeyScope(scope, customScopes);
         set(previousHotkeyScopeState, currentHotkeyScope);
       },

packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeyCallback.ts

@@ -5,7 +5,7 @@ import { logDebug } from '~/utils/logDebug';
 
 import { internalHotkeysEnabledScopesState } from '../states/internal/internalHotkeysEnabledScopesState';
 
-const DEBUG_HOTKEY_SCOPE = false;
+export const DEBUG_HOTKEY_SCOPE = true;
 
 export const useScopedHotkeyCallback = () =>
   useRecoilCallback(
@@ -31,7 +31,7 @@ export const useScopedHotkeyCallback = () =>
           // eslint-disable-next-line @nx/workspace-explicit-boolean-predicates-in-if
           if (DEBUG_HOTKEY_SCOPE) {
             logDebug(
-              `%cI can't call hotkey (${
+              `DEBUG: %cI can't call hotkey (${
                 hotkeysEvent.keys
               }) because I'm in scope [${scope}] and the active scopes are : [${currentHotkeyScopes.join(
                 ', ',
@@ -46,7 +46,7 @@ export const useScopedHotkeyCallback = () =>
         // eslint-disable-next-line @nx/workspace-explicit-boolean-predicates-in-if
         if (DEBUG_HOTKEY_SCOPE) {
           logDebug(
-            `%cI can call hotkey (${
+            `DEBUG: %cI can call hotkey (${
               hotkeysEvent.keys
             }) because I'm in scope [${scope}] and the active scopes are : [${currentHotkeyScopes.join(
               ', ',

packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts

@@ -1,6 +1,8 @@
 import { useRecoilCallback } from 'recoil';
 
+import { DEBUG_HOTKEY_SCOPE } from '@/ui/utilities/hotkey/hooks/useScopedHotkeyCallback';
 import { isDefined } from '~/utils/isDefined';
+import { logDebug } from '~/utils/logDebug';
 
 import { DEFAULT_HOTKEYS_SCOPE_CUSTOM_SCOPES } from '../constants/DefaultHotkeysScopeCustomScopes';
 import { currentHotkeyScopeState } from '../states/internal/currentHotkeyScopeState';
@@ -76,6 +78,17 @@ export const useSetHotkeyScope = () =>
         }
 
         scopesToSet.push(newHotkeyScope.scope);
+
+        // TODO: fix eslint rule not understanding a boolean constant
+        //    See issue https://github.com/twentyhq/twenty/issues/4881
+        // eslint-disable-next-line @nx/workspace-explicit-boolean-predicates-in-if
+        if (DEBUG_HOTKEY_SCOPE) {
+          logDebug('DEBUG: set new hotkey scope', {
+            scopesToSet,
+            newHotkeyScope,
+          });
+        }
+
         set(internalHotkeysEnabledScopesState, scopesToSet);
         set(currentHotkeyScopeState, newHotkeyScope);
       },