How to enable a submit button when having a default input value in a textfield when using Formik and Yup for form validation with MUI?

[nicsase]

I’m using Formik, Yup and MUI for form validation. And I would like to know how to manage Formik properties in order to enable a form button when I have a default value in a textfield component.

The idea is to have a default value for the TextfieldWrapper component, for which I receive the value as children and assign it to the value property of the component as long as it has a children as input, otherwise I show the empty field to fill.

The problem I have is that when I finish filling out the form when there is a default value in the textfield, the submit button is not enabled.

I noticed that Formik’s isValid property is kept false which is why the button is not enabled. On the other hand, the error Yup returns when I query the errors.batchNo property is that the batchNo field is required. So it seems that the default value in the textfield is not being recognized as a valid value.

I have customized the TextField component of MUI as follow:

import React from 'react';
import { TextField } from '@mui/material';
import { useField } from 'formik';

const TextfieldWrapper = ({ name, ...otherProps }) => {
  const [field, meta] = useField(name);
  const configTextfield = {
    ...field,
    ...disabled,
    ...otherProps,
    fullWidth: true,
    variant: 'outlined',
  };

  if (meta && meta.touched && meta.error) {
    configTextfield.error = true;
    configTextfield.helperText = meta.error;
  }
  return <TextField {...configTextfield} />;
};

This is the snippet code for the form:

const valSchema = Yup.object().shape({
  batchNo: Yup.string()
    .required('Required')
    .max(42, 'It must have 42 characters')
    .min(42, 'It must have 42 characters'),
  item: Yup.string().required('Required'),
  price: Yup.string().required('Required'),
});

const ItemForm = ({ children }) => {
return (
    <Grid container>
      <Grid item xs={12}>
        <Container maxWidth="md">
          <div>
            <Formik
              initialValues={initialValues}
              validationSchema={valSchema}
              onSubmit={(values) => {
                localHandleSubmit(values);
              }}
            >
              {({ dirty, isValid, errors }) => (
                <Form>
                  <Grid container spacing={2}>
                    {children ? (
                      <Grid item xs={12}>
                        <TextfieldWrapper name="batchNo" label="Batch No" value={children} />
                      </Grid>
                    ) : (
                      <Grid item xs={12}>
                        <TextfieldWrapper name="batchNo" label="Batch No" />
                      </Grid>
                    )}
                    <Grid item xs={6}>
                      <TextfieldWrapper name="item" label="Item" />
                    </Grid>
                    <Grid item xs={6}>
                      <TextfieldWrapper name="price" label="Price" />
                    </Grid>
                    <Grid item xs={6}>
                      <Typography>{dirty ? 'true' : 'false'}</Typography>
                      <Typography>{isValid ? 'true' : 'false'}</Typography>
                      <Typography>{errors.batchNo}</Typography>
                    </Grid>
                    <Grid item xs={12}>
                      <Button
                        fullWidth
                        variant="contained"
                        disabled={!isValid || !dirty}
                        type="submit"
                      >
                        {' '}
                        ADD
                      </Button>
                    </Grid>
                  </Grid>
                </Form>
              )}
            </Formik>
          </div>
        </Container>
      </Grid>
    </Grid>
  );
};

I would like to know how to manage Formik properties in order to enable a form button when I have a default value in a textfield component.

Thanks in advance.