Fixed scoped hotkeys (#6322)

- Removed enabled props from useScopedHotkeys becayse it doesn't work
- Moved enter useScopedHotkeys in a handler that we drill down to the
text inputs on the settings form

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -1,4 +1,7 @@
-import { Hotkey } from 'react-hotkeys-hook/dist/types';
+import {
+  Hotkey,
+  OptionsOrDependencyArray,
+} from 'react-hotkeys-hook/dist/types';
 import { useRecoilCallback } from 'recoil';
 
 import { logDebug } from '~/utils/logDebug';
@@ -7,15 +10,19 @@ import { internalHotkeysEnabledScopesState } from '../states/internal/internalHo
 
 export const DEBUG_HOTKEY_SCOPE = false;
 
-export const useScopedHotkeyCallback = () =>
-  useRecoilCallback(
+export const useScopedHotkeyCallback = (
+  dependencies?: OptionsOrDependencyArray,
+) => {
+  const dependencyArray = Array.isArray(dependencies) ? dependencies : [];
+
+  return useRecoilCallback(
     ({ snapshot }) =>
       ({
         callback,
         hotkeysEvent,
         keyboardEvent,
         scope,
-        preventDefault = true,
+        preventDefault,
       }: {
         keyboardEvent: KeyboardEvent;
         hotkeysEvent: Hotkey;
@@ -53,7 +60,14 @@ export const useScopedHotkeyCallback = () =>
           );
         }
 
-        if (preventDefault) {
+        if (preventDefault === true) {
+          if (DEBUG_HOTKEY_SCOPE) {
+            logDebug(
+              `DEBUG: %cI prevent default for hotkey (${hotkeysEvent.keys})`,
+              'color: gray;',
+            );
+          }
+
           keyboardEvent.stopPropagation();
           keyboardEvent.preventDefault();
           keyboardEvent.stopImmediatePropagation();
@@ -61,5 +75,7 @@ export const useScopedHotkeyCallback = () =>
 
         return callback(keyboardEvent, hotkeysEvent);
       },
-    [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    dependencyArray,
   );
+};

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

@@ -1,30 +1,36 @@
 import { useHotkeys } from 'react-hotkeys-hook';
-import {
-  HotkeyCallback,
-  Keys,
-  Options,
-  OptionsOrDependencyArray,
-} from 'react-hotkeys-hook/dist/types';
+import { HotkeyCallback, Keys, Options } from 'react-hotkeys-hook/dist/types';
 import { useRecoilState } from 'recoil';
 
 import { pendingHotkeyState } from '../states/internal/pendingHotkeysState';
 
+import { isDefined } from 'twenty-ui';
 import { useScopedHotkeyCallback } from './useScopedHotkeyCallback';
 
+type UseHotkeysOptionsWithoutBuggyOptions = Omit<Options, 'enabled'>;
+
 export const useScopedHotkeys = (
   keys: Keys,
   callback: HotkeyCallback,
   scope: string,
-  dependencies?: OptionsOrDependencyArray,
-  options: Options = {
-    enableOnContentEditable: true,
-    enableOnFormTags: true,
-    preventDefault: true,
-  },
+  dependencies?: unknown[],
+  options?: UseHotkeysOptionsWithoutBuggyOptions,
 ) => {
   const [pendingHotkey, setPendingHotkey] = useRecoilState(pendingHotkeyState);
 
-  const callScopedHotkeyCallback = useScopedHotkeyCallback();
+  const callScopedHotkeyCallback = useScopedHotkeyCallback(dependencies);
+
+  const enableOnContentEditable = isDefined(options?.enableOnContentEditable)
+    ? options.enableOnContentEditable
+    : true;
+
+  const enableOnFormTags = isDefined(options?.enableOnFormTags)
+    ? options.enableOnFormTags
+    : true;
+
+  const preventDefault = isDefined(options?.preventDefault)
+    ? options.preventDefault === true
+    : true;
 
   return useHotkeys(
     keys,
@@ -40,12 +46,12 @@ export const useScopedHotkeys = (
           setPendingHotkey(null);
         },
         scope,
-        preventDefault: !!options.preventDefault,
+        preventDefault,
       });
     },
     {
-      enableOnContentEditable: options.enableOnContentEditable,
-      enableOnFormTags: options.enableOnFormTags,
+      enableOnContentEditable,
+      enableOnFormTags,
     },
     dependencies,
   );