meta.touched is not getting true on form submit in react-final-form

Question

I have gone through a similar problem but that did not resolve my issue. I am working on a React app and React final form, According to the react final form developer the meta.touched will be true on form submit.

I tried the same, but the issue still persists.

I am generating the field data dynamically from the backend and render them in UI.

My Code

<Form
                onSubmit={onSubmit}
                // validate={validate}
                initialValues={ocaFormUserInput}
                subscription={{ submitting: true }}
                render={({ handleSubmit, submitting }) => (
                    <form onSubmit={handleSubmit}>
                      <Grid container>
                                            {formFieldDatum?.blockFields &&
                                                formFieldDatum?.blockFields.length !== 0 &&
                                                formFieldDatum?.blockFields.map((blockField, index) => (
                                                    <Grid className={classes.formGrid} item sm={6} xs={12} key={index}>
                                                        {blockField.jsonFeild.map((field, fieldKey) => {
                                                            return <AllInputFields key={fieldKey} field={field} setInvalid={setInvalid} />;
                                                        })}
                                                    </Grid>
                                                ))}
                                        </Grid>
                       <div className={classes.buttonBox}>
                            <Button className={classes.cancelBtn} onClick={prevFormProgress} variant="outlined" disabled={activeStep === 0}>
                                PREVIOUS
                            </Button>
                            <Button
                                className={classes.nextBtn}
                                onSubmit={!invalid ? handleActiveStep : undefined}
                                type="submit"
                                disabled={activeStep === 4 && submitting}
                                variant="contained"
                            >
                                {activeStep < 4 ? "NEXT" : "SUBMIT"}
                            </Button>
                        </div>
                    </form>

AllInputFields component

if (inputField.fieldDisplayTypeName === "TextField") {
        return (
            <FormControl variant="outlined" className={classes.formControl}>
                <Field
                    name={inputField.name}
                    validate={inputField.isMandatory && required}
                    type="text"
                    fieldProp={inputField}
                    subscription={{
                        value: true,
                        touched: true,
                        error: true,
                    }}
                >
                    {({ input, meta, fieldProp }) => (
                        <>
                            <TextField
                                {...input}
                                className={classes.textField}
                                variant="outlined"
                                label={fieldProp.label}
                                placeholder={fieldProp.placeholder}
                                required={fieldProp.isMandatory}
                                InputLabelProps={{
                                    shrink: true,
                                }}
                                error={meta.touched && meta.error}
                                helperText={meta.touched && meta.error && meta.error}
                                InputProps={{
                                    readOnly: activeStep === reviewTabIndex,
                                    autoComplete: "off",
                                }}
                            />
                            {fieldProp.isMandatory ? (meta.error ? setInvalid(true) : setInvalid(false)) : undefined}
                            <pre>{JSON.stringify(meta, 0, 2)}</pre>
                        </>
                    )}
                </Field>
            </FormControl>
        );
    }

I am using MUI theme for the design.

Kindly suggest me solution to get way out. I am trying to find solution but could not find one.

Answer 1

I got the perfect solution for the issue.... react-hook-form. If you are starting a project then use react-hook-form, it is much better than react final form and has a great community.

React Hook Form >>> React Final Form

Answer 2

if (!dirty) {
  const fields = form.getRegisteredFields()
  
  fields.map((field) => {
    form.focus(field);
    form.blur(field);
  });
}