Fixed: Select fields now selects on pressing the enter key (#5576)

Now while pressing the `Enter` button, the select field selects the
relevant option.

- Added a `handleKeyDown` function to set the `persistField` with the
selected option.
- Added an `onKeyDown` event on `DropdownMenuSearchInput` component, to
trigger `handleKeyDown` when `Enter` is pressed.
- Fixes: #5556

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx

@@ -1,5 +1,6 @@
-import { useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import styled from '@emotion/styled';
+import { Key } from 'ts-key-enum';
 
 import { useSelectField } from '@/object-record/record-field/meta-types/hooks/useSelectField';
 import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
@@ -8,6 +9,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { MenuItemSelectTag } from '@/ui/navigation/menu-item/components/MenuItemSelectTag';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from '~/utils/isDefined';
 
@@ -26,7 +28,8 @@ export const SelectFieldInput = ({
   onSubmit,
   onCancel,
 }: SelectFieldInputProps) => {
-  const { persistField, fieldDefinition, fieldValue } = useSelectField();
+  const { persistField, fieldDefinition, fieldValue, hotkeyScope } =
+    useSelectField();
   const [searchFilter, setSearchFilter] = useState('');
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -59,6 +62,20 @@ export const SelectFieldInput = ({
     },
   });
 
+  useScopedHotkeys(
+    Key.Enter,
+    () => {
+      const selectedOption = optionsInDropDown.find((option) =>
+        option.label.toLowerCase().includes(searchFilter.toLowerCase()),
+      );
+
+      if (isDefined(selectedOption)) {
+        onSubmit?.(() => persistField(selectedOption.value));
+      }
+    },
+    hotkeyScope,
+  );
+
   return (
     <StyledRelationPickerContainer ref={containerRef}>
       <DropdownMenu data-select-disable>

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx

@@ -3,6 +3,7 @@ import { useContext } from 'react';
 import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
+import { isFieldSelect } from '@/object-record/record-field/types/guards/isFieldSelect';
 import { RecordUpdateContext } from '@/object-record/record-table/contexts/EntityUpdateMutationHookContext';
 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
@@ -10,6 +11,7 @@ import { RecordTableRowContext } from '@/object-record/record-table/contexts/Rec
 import { RecordTableCell } from '@/object-record/record-table/record-table-cell/components/RecordTableCell';
 import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
+import { SelectFieldHotkeyScope } from '@/object-record/select/types/SelectFieldHotkeyScope';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
 export const RecordTableCellFieldContextWrapper = () => {
@@ -25,7 +27,9 @@ export const RecordTableCellFieldContextWrapper = () => {
 
   const customHotkeyScope = isFieldRelation(columnDefinition)
     ? RelationPickerHotkeyScope.RelationPicker
-    : TableHotkeyScope.CellEditMode;
+    : isFieldSelect(columnDefinition)
+      ? SelectFieldHotkeyScope.SelectField
+      : TableHotkeyScope.CellEditMode;
 
   return (
     <FieldContext.Provider

packages/twenty-front/src/modules/object-record/select/types/SelectFieldHotkeyScope.tsx

@@ -0,0 +1,3 @@
+export enum SelectFieldHotkeyScope {
+  SelectField = 'select-field',
+}