From 98b4e8431be387c2a91238e827610bee154b45e9 Mon Sep 17 00:00:00 2001 From: Balaji Krishnamurthy <107975017+BKM14@users.noreply.github.com> Date: Tue, 28 Oct 2025 19:36:15 +0530 Subject: [PATCH] Reset limit to 1 when object is changed (#15354) Closes #15345 The issue was that when the `onChange` was called on the Select component in `WorkflowEditActionFindRecords.tsx`, the limit was being reset to 1, but it wasn't rendering immediately. The sidebar had to be closed and reopened. I have added a `useEffect` as a hack to re-render the `FormNumberFieldInput` when it's `defaultValue` is changed. I understand that using `useEffect` is not a good choice. Please suggest a better fix if any and I will implement it. --------- Co-authored-by: Charles Bochet --- .../components/FormNumberFieldInput.tsx | 54 +++++++------------ .../FormPhoneFieldInput.stories.tsx | 35 ++++++++++++ 2 files changed, 55 insertions(+), 34 deletions(-) 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);