fix: Improve Usability of Adding Options via Return Key for Multi-Select Field (#7450)

Fixes #6602

This is the approach that I followed based on these comments
https://github.com/twentyhq/twenty/issues/6602#issuecomment-2356870311,
https://github.com/twentyhq/twenty/issues/6602#issuecomment-2330737907
- Create forward ref in `<TextInput>` component
- Create ref to select text in parent component
`<SettingsDataModelFieldSelectFormOptionRow>` and pass it to
`<TextInput>`

---------

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

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

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import { DropResult } from '@hello-pangea/dnd';
-import { useState } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { IconPlus } from 'twenty-ui';
 import { z } from 'zod';
@@ -79,7 +78,6 @@ const StyledButton = styled(LightButton)`
 export const SettingsDataModelFieldSelectForm = ({
   fieldMetadataItem,
 }: SettingsDataModelFieldSelectFormProps) => {
-  const [focusedOptionId, setFocusedOptionId] = useState('');
   const { initialDefaultValue, initialOptions } =
     useSelectSettingsFormInitialValues({ fieldMetadataItem });
 
@@ -190,10 +188,6 @@ export const SettingsDataModelFieldSelectForm = ({
     const newOptions = getOptionsWithNewOption();
 
     setFormValue('options', newOptions);
-
-    const lastOptionId = newOptions[newOptions.length - 1].id;
-
-    setFocusedOptionId(lastOptionId);
   };
 
   return (
@@ -227,7 +221,7 @@ export const SettingsDataModelFieldSelectForm = ({
                           <SettingsDataModelFieldSelectFormOptionRow
                             key={option.id}
                             option={option}
-                            focused={focusedOptionId === option.id}
+                            isNewRow={index === options.length - 1}
                             onChange={(nextOption) => {
                               const nextOptions = toSpliced(
                                 options,

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

@@ -33,7 +33,7 @@ type SettingsDataModelFieldSelectFormOptionRowProps = {
   onRemoveAsDefault?: () => void;
   onInputEnter?: () => void;
   option: FieldMetadataItemOption;
-  focused?: boolean;
+  isNewRow?: boolean;
 };
 
 const StyledRow = styled.div`
@@ -67,7 +67,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
   onRemoveAsDefault,
   onInputEnter,
   option,
-  focused,
+  isNewRow,
 }: SettingsDataModelFieldSelectFormOptionRowProps) => {
   const theme = useTheme();
 
@@ -129,10 +129,11 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
             value: getOptionValueFromLabel(label),
           })
         }
-        focused={focused}
         RightIcon={isDefault ? IconCheck : undefined}
         maxLength={OPTION_VALUE_MAXIMUM_LENGTH}
         onInputEnter={handleInputEnter}
+        autoFocusOnMount={isNewRow}
+        autoSelectOnMount={isNewRow}
       />
       <Dropdown
         dropdownId={dropdownIds.actions}