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/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx

@@ -1,8 +1,7 @@
-import { useState } from 'react';
-import { Controller, useFormContext } from 'react-hook-form';
 import styled from '@emotion/styled';
 import { DropResult } from '@hello-pangea/dnd';
-import { Key } from 'ts-key-enum';
+import { useState } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
 import { IconPlus } from 'twenty-ui';
 import { z } from 'zod';
 
@@ -21,8 +20,6 @@ import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { CardFooter } from '@/ui/layout/card/components/CardFooter';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { moveArrayItem } from '~/utils/array/moveArrayItem';
 import { toSpliced } from '~/utils/array/toSpliced';
@@ -189,19 +186,15 @@ export const SettingsDataModelFieldSelectForm = ({
     setFormValue('options', newOptions);
   };
 
-  useScopedHotkeys(
-    Key.Enter,
-    () => {
-      const newOptions = getOptionsWithNewOption();
+  const handleInputEnter = () => {
+    const newOptions = getOptionsWithNewOption();
 
-      setFormValue('options', newOptions);
+    setFormValue('options', newOptions);
 
-      const lastOptionId = newOptions[newOptions.length - 1].id;
+    const lastOptionId = newOptions[newOptions.length - 1].id;
 
-      setFocusedOptionId(lastOptionId);
-    },
-    AppHotkeyScope.App,
-  );
+    setFocusedOptionId(lastOptionId);
+  };
 
   return (
     <>
@@ -270,6 +263,7 @@ export const SettingsDataModelFieldSelectForm = ({
                             onRemoveAsDefault={() =>
                               handleRemoveOptionAsDefault(option.value)
                             }
+                            onInputEnter={handleInputEnter}
                           />
                         }
                       />

packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useRef } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { useMemo } from 'react';
 import {
   ColorSample,
   IconCheck,
@@ -31,6 +31,7 @@ type SettingsDataModelFieldSelectFormOptionRowProps = {
   onRemove?: () => void;
   onSetAsDefault?: () => void;
   onRemoveAsDefault?: () => void;
+  onInputEnter?: () => void;
   option: FieldMetadataItemOption;
   focused?: boolean;
 };
@@ -64,11 +65,10 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
   onRemove,
   onSetAsDefault,
   onRemoveAsDefault,
+  onInputEnter,
   option,
   focused,
 }: SettingsDataModelFieldSelectFormOptionRowProps) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-
   const theme = useTheme();
 
   const dropdownIds = useMemo(() => {
@@ -84,11 +84,9 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
     dropdownIds.actions,
   );
 
-  useEffect(() => {
-    if (focused === true) {
-      inputRef.current?.focus();
-    }
-  }, [focused]);
+  const handleInputEnter = () => {
+    onInputEnter?.();
+  };
 
   return (
     <StyledRow className={className}>
@@ -123,8 +121,6 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
         }
       />
       <StyledOptionInput
-        ref={inputRef}
-        disableHotkeys
         value={option.label}
         onChange={(label) =>
           onChange({
@@ -133,8 +129,10 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
             value: getOptionValueFromLabel(label),
           })
         }
+        focused={focused}
         RightIcon={isDefault ? IconCheck : undefined}
         maxLength={OPTION_VALUE_MAXIMUM_LENGTH}
+        onInputEnter={handleInputEnter}
       />
       <Dropdown
         dropdownId={dropdownIds.actions}