Form initial values only refreshing once

1 Answer 102 Views
Dialog Form
Laila
Top achievements
Rank 1
Laila asked on 16 Mar 2023, 07:16 PM

I have a KendoReact form, it has its own initialValues, and a controlled input field:

 <Form
                        ref={formRef as MutableRefObject<Form>}
                        onSubmit={handleOkButtonClick}
                        initialValues={initialData}
                        key={JSON.stringify(initialData)}
                        render={({ valid, visited }: FormRenderProps) => {
                            return (
                                <FormElement>
                                    <StackLayout gap={1} orientation={'vertical'}>
                                        <StackLayout gap={1} orientation={'vertical'}>
                                            <FieldWrapper>
                                                <Label>
                                                   'Name'      *
                                                </Label>
                                                <Field
                                                    name={'Name'}
                                                    component={InputFormComponent}
                                                    autoFocus={true}
                                                    validator={ValidationWorker.isRequired}
                                                    maxLength={255}
                                                    value={nameOfProfile}
                                                    onChange={(event) => {
                                                        setNameOfProfile(event.target.value);
                                                    }}
                                                />
                                            </FieldWrapper>

 

 

when I press on Copy button, new set of initial values need to be populated and inserted in the Name field, basically concatenating the string `- Copy` :

const handleCopyButtonClick = async () => {
        await uiHelper.blockUI(async () => {
            try {
                 await createOssSoProfile();
                setNameOfProfile(nameOfProfile + ` - Copy`);
                setInitialData({ Name: nameOfProfile + ` - Copy`, ...initialData });
            } catch (e) {
                uiHelper.showError(e);
            }
        });
    };

it only refreshed my form values once, so I can already see (name - Copy) 

second time I press Copy I expect it to be (name - Copy - Copy)

but it is not reflecting in the form, only in the state

 

what am I missing?


 

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 18 Mar 2023, 08:37 AM

Hi Laila,

The initialValues property of the Form component is designed to be used only for the initial state and any further changes must be handled within the Form. If you want to change a field value on some action you can use the formRenderProps and its onChange method or if the action is within the field editor you can use the fieldRenderProps.onChange. In the following example you can see how you can pass the formRenderProps to an editor and change another field value:

As for the initialValues, changing the "key" property of the Form will force a re-mount of the component and it will use the new values for populating the fields. I personally prefer using "new Date()" for each change of the "key" property.

If the issue on your side persists, please try to isolate the problem in stabkclitz example that we can test and debug locally.

 

Regards,
Konstantin Dikov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Dialog Form
Asked by
Laila
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or