From 07d07ff8764257355db5421b52bcff07f686e8bf Mon Sep 17 00:00:00 2001
From: Shashank Vishwakarma <shashank000s4@gmail.com>
Date: Tue, 11 Jun 2024 16:29:31 +0530
Subject: [PATCH] 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>
---
 .../input/components/SelectFieldInput.tsx     | 21 +++++++++++++++++--
 .../RecordTableCellFieldContextWrapper.tsx    |  6 +++++-
 .../select/types/SelectFieldHotkeyScope.tsx   |  3 +++
 3 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/object-record/select/types/SelectFieldHotkeyScope.tsx

diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx
index e0b433eef7..0f745de754 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx
+++ b/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>
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx
index 165dc3786e..ec30ebe03e 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableCellFieldContextWrapper.tsx
+++ b/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
diff --git a/packages/twenty-front/src/modules/object-record/select/types/SelectFieldHotkeyScope.tsx b/packages/twenty-front/src/modules/object-record/select/types/SelectFieldHotkeyScope.tsx
new file mode 100644
index 0000000000..8c3943203f
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/select/types/SelectFieldHotkeyScope.tsx
@@ -0,0 +1,3 @@
+export enum SelectFieldHotkeyScope {
+  SelectField = 'select-field',
+}