From 3736e90107f03f5f077b2d2349e7236de3866d13 Mon Sep 17 00:00:00 2001 From: nganphan123 Date: Fri, 4 Oct 2024 23:30:57 -0700 Subject: [PATCH 1/7] fix select text --- .../twenty-front/src/modules/ui/input/components/TextInput.tsx | 2 ++ 1 file changed, 2 insertions(+) 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 b0841eaa710f..03341b98126f 100644 --- a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx @@ -26,6 +26,7 @@ export const TextInput = ({ dataTestId, ...props }: TextInputProps) => { + // eslint-disable-next-line no-console const inputRef = useRef(null); const [isFocused, setIsFocused] = useState(false); @@ -33,6 +34,7 @@ export const TextInput = ({ useEffect(() => { if (focused === true) { inputRef.current?.focus(); + inputRef.current?.select(); setIsFocused(true); } }, [focused]); From 3c1b4c92c80d3f233d5b3cc8e2413255f56b916d Mon Sep 17 00:00:00 2001 From: nganphan123 Date: Sat, 5 Oct 2024 00:11:06 -0700 Subject: [PATCH 2/7] small fix --- .../twenty-front/src/modules/ui/input/components/TextInput.tsx | 1 - 1 file changed, 1 deletion(-) 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 03341b98126f..1fe1a5237978 100644 --- a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx @@ -26,7 +26,6 @@ export const TextInput = ({ dataTestId, ...props }: TextInputProps) => { - // eslint-disable-next-line no-console const inputRef = useRef(null); const [isFocused, setIsFocused] = useState(false); From 27947ddf787c009640ef441ec0a61aeb993c3b50 Mon Sep 17 00:00:00 2001 From: nganphan123 Date: Sat, 5 Oct 2024 02:21:38 -0700 Subject: [PATCH 3/7] fix text select on adding new setting data model option --- ...tingsDataModelFieldSelectFormOptionRow.tsx | 15 +- .../modules/ui/input/components/TextInput.tsx | 190 ++++++++++-------- 2 files changed, 115 insertions(+), 90 deletions(-) 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 121aa15e0e07..1c54bc1fad20 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 @@ -1,6 +1,6 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { useMemo } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import { ColorSample, IconCheck, @@ -69,6 +69,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({ option, focused, }: SettingsDataModelFieldSelectFormOptionRowProps) => { + const [hasFocused, setHasFocused] = useState(false); const theme = useTheme(); const dropdownIds = useMemo(() => { @@ -88,6 +89,17 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({ onInputEnter?.(); }; + const handleInputRef = useCallback( + (node: HTMLInputElement | null) => { + if (Boolean(node) && !hasFocused && Boolean(focused)) { + node?.focus(); + node?.select(); + setHasFocused(true); + } + }, + [hasFocused, focused], + ); + return ( onChange({ 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 1fe1a5237978..f96c0696e712 100644 --- a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx @@ -1,4 +1,10 @@ -import { FocusEventHandler, useEffect, useRef, useState } from 'react'; +import { + FocusEventHandler, + forwardRef, + useEffect, + useRef, + useState, +} from 'react'; import { Key } from 'ts-key-enum'; import { @@ -8,6 +14,7 @@ import { import { InputHotkeyScope } from '@/ui/input/types/InputHotkeyScope'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; +import { useCombinedRefs } from '~/hooks/useCombinedRefs'; import { isDefined } from '~/utils/isDefined'; export type TextInputProps = TextInputV2ComponentProps & { @@ -17,97 +24,102 @@ export type TextInputProps = TextInputV2ComponentProps & { focused?: boolean; }; -export const TextInput = ({ - onFocus, - onBlur, - onInputEnter, - disableHotkeys = false, - focused, - dataTestId, - ...props -}: TextInputProps) => { - const inputRef = useRef(null); - - const [isFocused, setIsFocused] = useState(false); - - useEffect(() => { - if (focused === true) { - inputRef.current?.focus(); - inputRef.current?.select(); - setIsFocused(true); - } - }, [focused]); - - const { - goBackToPreviousHotkeyScope, - setHotkeyScopeAndMemorizePreviousScope, - } = usePreviousHotkeyScope(); - - const handleFocus: FocusEventHandler = (e) => { - onFocus?.(e); - setIsFocused(true); - - if (!disableHotkeys) { - setHotkeyScopeAndMemorizePreviousScope(InputHotkeyScope.TextInput); - } - }; - - const handleBlur: FocusEventHandler = (e) => { - onBlur?.(e); - setIsFocused(false); - - if (!disableHotkeys) { - goBackToPreviousHotkeyScope(); - } - }; - - useScopedHotkeys( - [Key.Escape], - () => { - if (!isFocused) { - return; +export const TextInput = forwardRef( + ( + { + onFocus, + onBlur, + onInputEnter, + disableHotkeys = false, + focused, + dataTestId, + ...props + }: TextInputProps, + ref, + ) => { + const inputRef = useRef(null); + const combinedRef = useCombinedRefs(ref, inputRef); + + const [isFocused, setIsFocused] = useState(false); + + useEffect(() => { + if (focused === true) { + inputRef.current?.focus(); + setIsFocused(true); } + }, [focused]); - if (isDefined(inputRef) && 'current' in inputRef) { - inputRef.current?.blur(); - setIsFocused(false); - } - }, - InputHotkeyScope.TextInput, - [inputRef, isFocused], - { - preventDefault: false, - }, - ); - - useScopedHotkeys( - [Key.Enter], - () => { - if (!isFocused) { - return; + const { + goBackToPreviousHotkeyScope, + setHotkeyScopeAndMemorizePreviousScope, + } = usePreviousHotkeyScope(); + + const handleFocus: FocusEventHandler = (e) => { + onFocus?.(e); + setIsFocused(true); + + if (!disableHotkeys) { + setHotkeyScopeAndMemorizePreviousScope(InputHotkeyScope.TextInput); } + }; - onInputEnter?.(); + const handleBlur: FocusEventHandler = (e) => { + onBlur?.(e); + setIsFocused(false); - if (isDefined(inputRef) && 'current' in inputRef) { - setIsFocused(false); + if (!disableHotkeys) { + goBackToPreviousHotkeyScope(); } - }, - InputHotkeyScope.TextInput, - [inputRef, isFocused, onInputEnter], - { - preventDefault: false, - }, - ); - - return ( - - ); -}; + }; + + useScopedHotkeys( + [Key.Escape], + () => { + if (!isFocused) { + return; + } + + if (isDefined(inputRef) && 'current' in inputRef) { + inputRef.current?.blur(); + setIsFocused(false); + } + }, + InputHotkeyScope.TextInput, + [inputRef, isFocused], + { + preventDefault: false, + }, + ); + + useScopedHotkeys( + [Key.Enter], + () => { + if (!isFocused) { + return; + } + + onInputEnter?.(); + + if (isDefined(inputRef) && 'current' in inputRef) { + setIsFocused(false); + } + }, + InputHotkeyScope.TextInput, + [inputRef, isFocused, onInputEnter], + { + preventDefault: false, + }, + ); + + return ( + + ); + }, +); From 1794e756406c6530129185fa7a8bb28cacd931e0 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Mon, 7 Oct 2024 12:06:06 +0200 Subject: [PATCH 4/7] Test --- .../SettingsDataModelFieldSelectForm.tsx | 2 +- ...tingsDataModelFieldSelectFormOptionRow.tsx | 18 +- .../SettingsServerlessFunctionNewForm.tsx | 10 +- .../modules/ui/input/components/TextInput.tsx | 199 +++++++++--------- 4 files changed, 104 insertions(+), 125 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 9d3c97628f2e..1f2385df414e 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 @@ -227,7 +227,7 @@ export const SettingsDataModelFieldSelectForm = ({ { 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 1c54bc1fad20..16be1cf3b722 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 @@ -1,6 +1,6 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { useCallback, useMemo, useState } from 'react'; +import { useMemo } from 'react'; import { ColorSample, IconCheck, @@ -33,7 +33,6 @@ type SettingsDataModelFieldSelectFormOptionRowProps = { onRemoveAsDefault?: () => void; onInputEnter?: () => void; option: FieldMetadataItemOption; - focused?: boolean; }; const StyledRow = styled.div` @@ -67,9 +66,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({ onRemoveAsDefault, onInputEnter, option, - focused, }: SettingsDataModelFieldSelectFormOptionRowProps) => { - const [hasFocused, setHasFocused] = useState(false); const theme = useTheme(); const dropdownIds = useMemo(() => { @@ -89,17 +86,6 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({ onInputEnter?.(); }; - const handleInputRef = useCallback( - (node: HTMLInputElement | null) => { - if (Boolean(node) && !hasFocused && Boolean(focused)) { - node?.focus(); - node?.select(); - setHasFocused(true); - } - }, - [hasFocused, focused], - ); - return ( onChange({ @@ -142,7 +127,6 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({ value: getOptionValueFromLabel(label), }) } - focused={focused} RightIcon={isDefault ? IconCheck : undefined} maxLength={OPTION_VALUE_MAXIMUM_LENGTH} onInputEnter={handleInputEnter} 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 b9ba77a74ce8..1cea52740402 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 { 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 { ServerlessFunctionNewFormValues } from '@/settings/serverless-functions/hooks/useServerlessFunctionUpdateFormState'; +import { H2Title } from 'twenty-ui'; const StyledInputsContainer = styled.div` display: flex; @@ -25,7 +25,7 @@ export const SettingsServerlessFunctionNewForm = ({ 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 f96c0696e712..3b1b1ed258c2 100644 --- a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx @@ -1,10 +1,4 @@ -import { - FocusEventHandler, - forwardRef, - useEffect, - useRef, - useState, -} from 'react'; +import { FocusEventHandler, useEffect, useRef, useState } from 'react'; import { Key } from 'ts-key-enum'; import { @@ -14,112 +8,113 @@ import { import { InputHotkeyScope } from '@/ui/input/types/InputHotkeyScope'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; -import { useCombinedRefs } from '~/hooks/useCombinedRefs'; import { isDefined } from '~/utils/isDefined'; export type TextInputProps = TextInputV2ComponentProps & { disableHotkeys?: boolean; onInputEnter?: () => void; dataTestId?: string; - focused?: boolean; + autoFocus?: boolean; + autoSelect?: boolean; }; -export const TextInput = forwardRef( - ( - { - onFocus, - onBlur, - onInputEnter, - disableHotkeys = false, - focused, - dataTestId, - ...props - }: TextInputProps, - ref, - ) => { - const inputRef = useRef(null); - const combinedRef = useCombinedRefs(ref, inputRef); - - const [isFocused, setIsFocused] = useState(false); - - useEffect(() => { - if (focused === true) { - inputRef.current?.focus(); - setIsFocused(true); - } - }, [focused]); - - const { - goBackToPreviousHotkeyScope, - setHotkeyScopeAndMemorizePreviousScope, - } = usePreviousHotkeyScope(); - - const handleFocus: FocusEventHandler = (e) => { - onFocus?.(e); +export const TextInput = ({ + onFocus, + onBlur, + onInputEnter, + disableHotkeys = false, + autoFocus, + autoSelect, + dataTestId, + ...props +}: TextInputProps) => { + const inputRef = useRef(null); + + const [isFocused, setIsFocused] = useState(false); + + useEffect(() => { + if (autoFocus === true) { + inputRef.current?.focus(); setIsFocused(true); + } + }, [autoFocus]); + + useEffect(() => { + if (autoSelect === true) { + inputRef.current?.select(); + } + }, [autoSelect]); + + const { + goBackToPreviousHotkeyScope, + setHotkeyScopeAndMemorizePreviousScope, + } = usePreviousHotkeyScope(); + + const handleFocus: FocusEventHandler = (e) => { + onFocus?.(e); + setIsFocused(true); + + if (!disableHotkeys) { + setHotkeyScopeAndMemorizePreviousScope(InputHotkeyScope.TextInput); + } + }; + + const handleBlur: FocusEventHandler = (e) => { + onBlur?.(e); + setIsFocused(false); + + if (!disableHotkeys) { + goBackToPreviousHotkeyScope(); + } + }; + + useScopedHotkeys( + [Key.Escape], + () => { + if (!isFocused) { + return; + } - if (!disableHotkeys) { - setHotkeyScopeAndMemorizePreviousScope(InputHotkeyScope.TextInput); + if (isDefined(inputRef) && 'current' in inputRef) { + inputRef.current?.blur(); + setIsFocused(false); + } + }, + InputHotkeyScope.TextInput, + [inputRef, isFocused], + { + preventDefault: false, + }, + ); + + useScopedHotkeys( + [Key.Enter], + () => { + if (!isFocused) { + return; } - }; - const handleBlur: FocusEventHandler = (e) => { - onBlur?.(e); - setIsFocused(false); + onInputEnter?.(); - if (!disableHotkeys) { - goBackToPreviousHotkeyScope(); + if (isDefined(inputRef) && 'current' in inputRef) { + setIsFocused(false); } - }; - - useScopedHotkeys( - [Key.Escape], - () => { - if (!isFocused) { - return; - } - - if (isDefined(inputRef) && 'current' in inputRef) { - inputRef.current?.blur(); - setIsFocused(false); - } - }, - InputHotkeyScope.TextInput, - [inputRef, isFocused], - { - preventDefault: false, - }, - ); - - useScopedHotkeys( - [Key.Enter], - () => { - if (!isFocused) { - return; - } - - onInputEnter?.(); - - if (isDefined(inputRef) && 'current' in inputRef) { - setIsFocused(false); - } - }, - InputHotkeyScope.TextInput, - [inputRef, isFocused, onInputEnter], - { - preventDefault: false, - }, - ); - - return ( - - ); - }, -); + }, + InputHotkeyScope.TextInput, + [inputRef, isFocused, onInputEnter], + { + preventDefault: false, + }, + ); + + return ( + + ); +}; From c038226a328a6fa697cf81410c93802166e61f4d Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Mon, 7 Oct 2024 12:23:22 +0200 Subject: [PATCH 5/7] Used a semantic approach --- .../SettingsDataModelFieldSelectForm.tsx | 4 +++- ...SettingsDataModelFieldSelectFormOptionRow.tsx | 4 ++++ .../modules/ui/input/components/TextInput.tsx | 16 ++++++++-------- 3 files changed, 15 insertions(+), 9 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 1f2385df414e..3192d005a1e7 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 @@ -227,7 +227,9 @@ export const SettingsDataModelFieldSelectForm = ({ 1 && 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 16be1cf3b722..d9be3fff7e0e 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,6 +33,7 @@ type SettingsDataModelFieldSelectFormOptionRowProps = { onRemoveAsDefault?: () => void; onInputEnter?: () => void; option: FieldMetadataItemOption; + isNewRow?: boolean; }; const StyledRow = styled.div` @@ -66,6 +67,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({ onRemoveAsDefault, onInputEnter, option, + isNewRow, }: SettingsDataModelFieldSelectFormOptionRowProps) => { const theme = useTheme(); @@ -130,6 +132,8 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({ RightIcon={isDefault ? IconCheck : undefined} maxLength={OPTION_VALUE_MAXIMUM_LENGTH} onInputEnter={handleInputEnter} + autoFocusOnMount={isNewRow} + autoSelectOnMount={isNewRow} /> void; dataTestId?: string; - autoFocus?: boolean; - autoSelect?: boolean; + autoFocusOnMount?: boolean; + autoSelectOnMount?: boolean; }; export const TextInput = ({ @@ -23,8 +23,8 @@ export const TextInput = ({ onBlur, onInputEnter, disableHotkeys = false, - autoFocus, - autoSelect, + autoFocusOnMount, + autoSelectOnMount, dataTestId, ...props }: TextInputProps) => { @@ -33,17 +33,17 @@ export const TextInput = ({ const [isFocused, setIsFocused] = useState(false); useEffect(() => { - if (autoFocus === true) { + if (autoFocusOnMount === true) { inputRef.current?.focus(); setIsFocused(true); } - }, [autoFocus]); + }, [autoFocusOnMount]); useEffect(() => { - if (autoSelect === true) { + if (autoSelectOnMount === true) { inputRef.current?.select(); } - }, [autoSelect]); + }, [autoSelectOnMount]); const { goBackToPreviousHotkeyScope, From 3ed88e428159e3a770558d763598739bfd38a45f Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Mon, 7 Oct 2024 12:41:24 +0200 Subject: [PATCH 6/7] Fix --- .../components/SettingsServerlessFunctionNewForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 1cea52740402..46803ca08534 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 @@ -25,7 +25,7 @@ export const SettingsServerlessFunctionNewForm = ({ From 1b6be5e7adfdc80a2dcec5d45d28197886ab288d Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Mon, 7 Oct 2024 12:48:43 +0200 Subject: [PATCH 7/7] Fix --- .../components/SettingsDataModelFieldSelectForm.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 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 3192d005a1e7..128aab7ab6fd 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,9 +221,7 @@ export const SettingsDataModelFieldSelectForm = ({ 1 && index === options.length - 1 - } + isNewRow={index === options.length - 1} onChange={(nextOption) => { const nextOptions = toSpliced( options,