From 2bc7974da97db772e63385d72948df7633518133 Mon Sep 17 00:00:00 2001
From: Ngan Phan <jill01009@gmail.com>
Date: Mon, 7 Oct 2024 04:06:51 -0700
Subject: [PATCH] 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>
---
 .../SettingsDataModelFieldSelectForm.tsx         |  8 +-------
 ...SettingsDataModelFieldSelectFormOptionRow.tsx |  7 ++++---
 .../SettingsServerlessFunctionNewForm.tsx        | 12 ++++++------
 .../modules/ui/input/components/TextInput.tsx    | 16 ++++++++++++----
 4 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
index 9d3c97628..128aab7ab 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
+++ b/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,
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
index 121aa15e0..d9be3fff7 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
+++ b/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}
diff --git a/packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionNewForm.tsx b/packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionNewForm.tsx
index b9ba77a74..46803ca08 100644
--- a/packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionNewForm.tsx
+++ b/packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionNewForm.tsx
@@ -1,9 +1,9 @@
-import { H2Title } from 'twenty-ui';
-import { Section } from '@/ui/layout/section/components/Section';
-import { TextInput } from '@/ui/input/components/TextInput';
-import { TextArea } from '@/ui/input/components/TextArea';
-import styled from '@emotion/styled';
 import { ServerlessFunctionNewFormValues } from '@/settings/serverless-functions/hooks/useServerlessFunctionUpdateFormState';
+import { TextArea } from '@/ui/input/components/TextArea';
+import { TextInput } from '@/ui/input/components/TextInput';
+import { Section } from '@/ui/layout/section/components/Section';
+import styled from '@emotion/styled';
+import { H2Title } from 'twenty-ui';
 
 const StyledInputsContainer = styled.div`
   display: flex;
@@ -25,7 +25,7 @@ export const SettingsServerlessFunctionNewForm = ({
         <TextInput
           placeholder="Name"
           fullWidth
-          focused
+          autoFocusOnMount
           value={formValues.name}
           onChange={onChange('name')}
         />
diff --git a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx
index b0841eaa7..8e31f5988 100644
--- a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx
@@ -14,7 +14,8 @@ export type TextInputProps = TextInputV2ComponentProps & {
   disableHotkeys?: boolean;
   onInputEnter?: () => void;
   dataTestId?: string;
-  focused?: boolean;
+  autoFocusOnMount?: boolean;
+  autoSelectOnMount?: boolean;
 };
 
 export const TextInput = ({
@@ -22,7 +23,8 @@ export const TextInput = ({
   onBlur,
   onInputEnter,
   disableHotkeys = false,
-  focused,
+  autoFocusOnMount,
+  autoSelectOnMount,
   dataTestId,
   ...props
 }: TextInputProps) => {
@@ -31,11 +33,17 @@ export const TextInput = ({
   const [isFocused, setIsFocused] = useState(false);
 
   useEffect(() => {
-    if (focused === true) {
+    if (autoFocusOnMount === true) {
       inputRef.current?.focus();
       setIsFocused(true);
     }
-  }, [focused]);
+  }, [autoFocusOnMount]);
+
+  useEffect(() => {
+    if (autoSelectOnMount === true) {
+      inputRef.current?.select();
+    }
+  }, [autoSelectOnMount]);
 
   const {
     goBackToPreviousHotkeyScope,