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