Fix refactor selectableList broke hotkey onEnter behavior (#11562)

packages/twenty-front/src/modules/action-menu/actions/display/components/ActionListItem.tsx

@@ -2,7 +2,7 @@ import { ActionDisplayProps } from '@/action-menu/actions/display/components/Act
 import { getActionLabel } from '@/action-menu/utils/getActionLabel';
 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
-import { useListenToEnterHotkeyOnListItem } from '@/ui/layout/selectable-list/hooks/useListenToEnterHotkeyOnListItem';
+import { useSelectableListListenToEnterHotkeyOnItem } from '@/ui/layout/selectable-list/hooks/useSelectableListListenToEnterHotkeyOnItem';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { useNavigate } from 'react-router-dom';
 import { isDefined } from 'twenty-shared/utils';
@@ -25,7 +25,7 @@ export const ActionListItem = ({
     }
   };
 
-  useListenToEnterHotkeyOnListItem({
+  useSelectableListListenToEnterHotkeyOnItem({
     hotkeyScope: AppHotkeyScope.CommandMenuOpen,
     itemId: action.key,
     onEnter: handleClick,

packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/useSelectableListListenToEnterHotkeyOnItem.ts

@@ -1,21 +1,24 @@
+import { SelectableListComponentInstanceContext } from '@/ui/layout/selectable-list/states/contexts/SelectableListComponentInstanceContext';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilCallback } from 'recoil';
 import { Key } from 'ts-key-enum';
 
-export const useListenToEnterHotkeyOnListItem = ({
+export const useSelectableListListenToEnterHotkeyOnItem = ({
   hotkeyScope,
-
   itemId,
   onEnter,
 }: {
   hotkeyScope: string;
-
   itemId: string;
   onEnter: () => void;
 }) => {
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    SelectableListComponentInstanceContext,
+  );
   useScopedHotkeys(
     Key.Enter,
     useRecoilCallback(
@@ -24,7 +27,7 @@ export const useListenToEnterHotkeyOnListItem = ({
           const selectedItemId = getSnapshotValue(
             snapshot,
             selectedItemIdComponentState.atomFamily({
-              instanceId: itemId,
+              instanceId,
             }),
           );
 
@@ -32,7 +35,7 @@ export const useListenToEnterHotkeyOnListItem = ({
             onEnter?.();
           }
         },
-      [itemId, onEnter],
+      [instanceId, itemId, onEnter],
     ),
     hotkeyScope,
     [itemId, onEnter],