formik setFieldValue input struggling

26 views Asked by At

I have a form using Formik. Inside this form, there are multiple input fields, checkboxes, and similar components. I am passing Formik as props to each component like this:

<DescriptionField formik={formik} />

These components contain custom Material-UI input components.

In the onChange event, I am using setFieldValue like this:

export const DescriptionField = ({
    formik,
    ...rest
}: FormComponentProps<T>) => (
    <Field name="description">
        {({ form: { setFieldValue }}: FieldProps) => (
             <CustomInput
                value={formik.values.description}
                label="Description"
                setField={(description) => {
                   setFieldValue('description', description);
                }}
                {...rest}
            />
        )}
    </Field>
);


export const CustomInput = ({
    setField,
    values
    label
    ...rest
}: FormComponentProps<T>) => (
     <TextField
        onChange={(e: any) => {
            setField({ ...values, [selectedOption]: e.target.value });
        }}
        value={values && values[selectedOption] ? values[selectedOption] : ''}
       ....
    </TextField>
);

When typing in these components, there is a slight delay of 1-2 seconds before the input is filled.

I tried using useDebounce callback, which partially solved the issue, but what is the best way to handle this?

0

There are 0 answers