Form initial values only refreshing once

[Laila]

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?

 

[Konstantin Dikov]

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:

• https://stackblitz.com/edit/react-232pue?file=app%2Fmain.jsx

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