Feat/better hotkeys scope (#526)

* Working version

* fix

* Fixed console log

* Fix lint

* wip

* Fix

* Fix

* consolelog

---------

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

front/src/modules/relation-picker/components/SingleEntitySelectBase.tsx

@@ -1,6 +1,7 @@
 import { useRef } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
 
+import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
+import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { EntityForSelect } from '@/relation-picker/types/EntityForSelect';
 import { DropdownMenuItem } from '@/ui/components/menu/DropdownMenuItem';
 import { DropdownMenuItemContainer } from '@/ui/components/menu/DropdownMenuItemContainer';
@@ -40,15 +41,13 @@ export function SingleEntitySelectBase<
     containerRef,
   });
 
-  useHotkeys(
+  // TODO: move to better place for scopping
+  useScopedHotkeys(
     'enter',
     () => {
       onEntitySelected(entitiesInDropdown[hoveredIndex]);
     },
-    {
-      enableOnContentEditable: true,
-      enableOnFormTags: true,
-    },
+    InternalHotkeysScope.RelationPicker,
     [entitiesInDropdown, hoveredIndex, onEntitySelected],
   );
 

front/src/modules/relation-picker/hooks/useEntitySelectScroll.ts

@@ -1,6 +1,8 @@
 import scrollIntoView from 'scroll-into-view';
+import { Key } from 'ts-key-enum';
 
-import { useUpDownHotkeys } from '@/hotkeys/hooks/useUpDownHotkeys';
+import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
+import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { useRecoilScopedState } from '@/recoil-scope/hooks/useRecoilScopedState';
 
 import { relationPickerHoverIndexScopedState } from '../states/relationPickerHoverIndexScopedState';
@@ -19,7 +21,8 @@ export function useEntitySelectScroll<
     relationPickerHoverIndexScopedState,
   );
 
-  useUpDownHotkeys(
+  useScopedHotkeys(
+    Key.ArrowUp,
     () => {
       setHoveredIndex((prevSelectedIndex) =>
         Math.max(prevSelectedIndex - 1, 0),
@@ -41,6 +44,12 @@ export function useEntitySelectScroll<
         });
       }
     },
+    InternalHotkeysScope.RelationPicker,
+    [setHoveredIndex, entities],
+  );
+
+  useScopedHotkeys(
+    Key.ArrowDown,
     () => {
       setHoveredIndex((prevSelectedIndex) =>
         Math.min(prevSelectedIndex + 1, (entities?.length ?? 0) - 1),
@@ -62,6 +71,7 @@ export function useEntitySelectScroll<
         });
       }
     },
+    InternalHotkeysScope.RelationPicker,
     [setHoveredIndex, entities],
   );