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/input/components/TextInput.tsx

@@ -1,4 +1,4 @@
-import { FocusEventHandler, forwardRef, ForwardRefRenderFunction } from 'react';
+import { FocusEventHandler, useEffect, useRef, useState } from 'react';
 import { Key } from 'ts-key-enum';
 
 import {
@@ -10,14 +10,31 @@ import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousH
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { isDefined } from '~/utils/isDefined';
 
-export type TextInputComponentProps = TextInputV2ComponentProps & {
+export type TextInputProps = TextInputV2ComponentProps & {
   disableHotkeys?: boolean;
+  onInputEnter?: () => void;
+  focused?: boolean;
 };
 
-const TextInputComponent: ForwardRefRenderFunction<
-  HTMLInputElement,
-  TextInputComponentProps
-> = ({ onFocus, onBlur, disableHotkeys = false, ...props }, ref) => {
+export const TextInput = ({
+  onFocus,
+  onBlur,
+  onInputEnter,
+  disableHotkeys = false,
+  focused,
+  ...props
+}: TextInputProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [isFocused, setIsFocused] = useState(false);
+
+  useEffect(() => {
+    if (focused === true) {
+      inputRef.current?.focus();
+      setIsFocused(true);
+    }
+  }, [focused]);
+
   const {
     goBackToPreviousHotkeyScope,
     setHotkeyScopeAndMemorizePreviousScope,
@@ -25,6 +42,7 @@ const TextInputComponent: ForwardRefRenderFunction<
 
   const handleFocus: FocusEventHandler<HTMLInputElement> = (e) => {
     onFocus?.(e);
+    setIsFocused(true);
 
     if (!disableHotkeys) {
       setHotkeyScopeAndMemorizePreviousScope(InputHotkeyScope.TextInput);
@@ -33,6 +51,7 @@ const TextInputComponent: ForwardRefRenderFunction<
 
   const handleBlur: FocusEventHandler<HTMLInputElement> = (e) => {
     onBlur?.(e);
+    setIsFocused(false);
 
     if (!disableHotkeys) {
       goBackToPreviousHotkeyScope();
@@ -40,19 +59,48 @@ const TextInputComponent: ForwardRefRenderFunction<
   };
 
   useScopedHotkeys(
-    [Key.Escape, Key.Enter],
+    [Key.Escape],
     () => {
-      if (isDefined(ref) && 'current' in ref) {
-        ref.current?.blur();
+      if (!isFocused) {
+        return;
+      }
+
+      if (isDefined(inputRef) && 'current' in inputRef) {
+        inputRef.current?.blur();
+        setIsFocused(false);
       }
     },
     InputHotkeyScope.TextInput,
-    { enabled: !disableHotkeys },
+    [inputRef, isFocused],
+    {
+      preventDefault: false,
+    },
+  );
+
+  useScopedHotkeys(
+    [Key.Enter],
+    () => {
+      if (!isFocused) {
+        return;
+      }
+
+      onInputEnter?.();
+
+      if (isDefined(inputRef) && 'current' in inputRef) {
+        inputRef.current?.blur();
+        setIsFocused(false);
+      }
+    },
+    InputHotkeyScope.TextInput,
+    [inputRef, isFocused, onInputEnter],
+    {
+      preventDefault: false,
+    },
   );
 
   return (
     <TextInputV2
-      ref={ref}
+      ref={inputRef}
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}
       onFocus={handleFocus}
@@ -60,5 +108,3 @@ const TextInputComponent: ForwardRefRenderFunction<
     />
   );
 };
-
-export const TextInput = forwardRef(TextInputComponent);

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

@@ -1,10 +1,10 @@
-import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
 import { ComponentDecorator } from 'twenty-ui';
 
-import { TextInput, TextInputComponentProps } from '../TextInput';
+import { TextInput, TextInputProps } from '../TextInput';
 
-type RenderProps = TextInputComponentProps;
+type RenderProps = TextInputProps;
 
 const Render = (args: RenderProps) => {
   const [value, setValue] = useState(args.value);

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