diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNumberFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNumberFieldInput.tsx index f6939af0e2..8f3b7375e9 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNumberFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNumberFieldInput.tsx @@ -33,6 +33,16 @@ type FormNumberFieldInputProps = { onError?: (error: string | undefined) => void; }; +type FormNumberFieldInputValue = + | { + type: 'static'; + value: string; + } + | { + type: 'variable'; + value: string; + }; + export const FormNumberFieldInput = ({ label, placeholder, @@ -50,26 +60,17 @@ export const FormNumberFieldInput = ({ undefined, ); - const [draftValue, setDraftValue] = useState< - | { - type: 'static'; - value: string; + const draftValue: FormNumberFieldInputValue = isStandaloneVariableString( + defaultValue, + ) + ? { + type: 'variable', + value: defaultValue, } - | { - type: 'variable'; - value: string; - } - >( - isStandaloneVariableString(defaultValue) - ? { - type: 'variable', - value: defaultValue, - } - : { - type: 'static', - value: isDefined(defaultValue) ? String(defaultValue) : '', - }, - ); + : { + type: 'static', + value: isDefined(defaultValue) ? String(defaultValue) : '', + }; const persistNumber = (newValue: string) => { if (!canBeCastAsNumberOrNull(newValue)) { @@ -87,29 +88,14 @@ export const FormNumberFieldInput = ({ }; const handleChange = (newText: string) => { - setDraftValue({ - type: 'static', - value: newText, - }); - persistNumber(newText.trim()); }; const handleUnlinkVariable = () => { - setDraftValue({ - type: 'static', - value: '', - }); - onChange(null); }; const handleVariableTagInsert = (variableName: string) => { - setDraftValue({ - type: 'variable', - value: variableName, - }); - onChange(variableName); }; diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/__stories__/FormPhoneFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/__stories__/FormPhoneFieldInput.stories.tsx index 0ec2b9ffea..ba519988df 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/__stories__/FormPhoneFieldInput.stories.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/__stories__/FormPhoneFieldInput.stories.tsx @@ -1,5 +1,6 @@ import { type Meta, type StoryObj } from '@storybook/react'; import { expect, fn, userEvent, waitFor, within } from '@storybook/test'; +import { useState } from 'react'; import { type FieldPhonesValue } from '@/object-record/record-field/ui/types/FieldMetadata'; import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator'; @@ -25,6 +26,31 @@ const defaultPhoneValue: FieldPhonesValue = { primaryPhoneCallingCode: '33', }; +const FormPhoneFieldInputWithState = ({ + defaultValue, + label, + onChange, + readonly, + VariablePicker, +}: React.ComponentProps) => { + const [value, setValue] = useState( + defaultValue, + ); + + return ( + { + setValue(newValue); + onChange?.(newValue); + }} + readonly={readonly} + VariablePicker={VariablePicker} + /> + ); +}; + export const Default: Story = { args: { label: 'Phone', @@ -78,6 +104,15 @@ export const SelectingVariables: Story = { }, onChange: fn(), }, + render: (args) => ( + + ), play: async ({ canvasElement, args }) => { const canvas = within(canvasElement);