I want to use nested Step Components within a Material UI Stepper Component

This is the behavior that the client expects. I am using Material UI, and Formik within a NextJS context. I am using the tutorial as a reference.

Wireframes

Below are some wireframes that help illustrate what each the three top-level parent steps, and the third screenshot illustrates that the last parent step (step 3) has three, nested child steps.

Parent Step One - Tell Us About Your Property NO CHILDREN STEPS

This is the first step in the form. The customer will provide info on the land or standing structure that will have media produced (depending on there choice certain products will not be options they can select).

Screenshot 1: This is the first step in the form

Parent Step Two - Select Your Services A PORTAL WITH MULTIPLE PRODUCTS AND PACKAGES

This step will actually be a non-linear portal to seeing categorized products. There are four service categories with products and sub-packages. The goal is to be able to pick and select products and add them to the cart.

Screenshot 2: This is the homepage/ portal

Parent Step Three - Provide Some Info 3 CHILD STEPS

This step will actually be a non-linear portal to seeing categorized products. There are four service categories with products and sub-packages. The goal is to be able to pick and select products and add them to the cart.

Screenshot 3: This is the place we collect info within 3 child "steps"

Here is the rundown on the Material Ui Stepper Component.
https://material-ui.com/components/steppers/

Here is a stack question I posted:
https://stackoverflow.com/questions/64883191/how-do-i-implement-nested-steps-within-an-individual-material-ui-stepper-step-a

Absolutely brilliant demo and video.

I've been trying to use react-bootstrap instead of formiks fields, but what I want to do is pass additional formik props in the children so I can use formiks (values, errors and touched) implementation.

Do you perhaps know how I could pass down formik props to the FormikStep so that any react bootstrap field I implement can access formiks touched, values and errors for example?

https://react-bootstrap.github.io/components/forms/#forms-validation-libraries <-- example here of the extra formik items mentioned above.

Thanks

Hi,

Thanks for the wonderful video and for providing all the code.

I am creating a site and would like to make FormikSteps within component so I can reuse them and make sure I keep the code DRY.

The problem I am having is when calling the component which returns a FormikStep inside a FormikStepper, the label and validationSchema don't exist on the parent, therefore the FormikStepper cannot access them.

Please see some example code:

MyForm.js

export default function MyForm() {
  const classes = useStyles();

  return (
      <Box p={2}>
        <FormikStepper
          initialValues={{ name: "" }}
          onSubmit={(values, actions) => {
            actions.setSubmitting(false);
            console.log(values);
          }}
        >

          <ReusableStep />

        </FormikStepper>
      </Box>
  );
}

ReusableStep.js

export default function ReusableStep() {

  return (
    <FormikStep
      label="Reusable Form Step"
      validationSchema={Yup.object({})}
    >

              <Grid item xs={12} sm={true}>

                <Field
                  component={TextField}
                  type="text"
                  name="name"
                  label="Name"
                  fullWidth
                />

              </Grid>
    <FormikStep />
  )
}

When in the current state, the validation doesn't work, and the Material UI Step doesn't get a label.

The only way I can get it to work is by passing validationSchema and label to the ReusableStep:

<ReusableStep 
      label="Reusable Form Step"
      validationSchema={Yup.object({})}
/>

This is not great, as I would have to repeat defining the schema each time I want to use the FormikStep.

Please could you help me get this sorted?

Many thanks,
Zac

I can't set a field value after an onBlur.

something like:

const handleCEP = (ev, props) => {
  props.handleChange(ev);
  
  fetch(`https://viacep.com.br/ws/77807060/json/`)
    .then((res) => res.json())
    .then((data) => {
      props.setFieldValue("logradouro", data.logradouro);
    });
};

<Field
  name="cep"
  component={TextField}
  type="text"
  label="CEP"
  placeholder="Qual seu CEP?"
  variant="outlined"
  onBlur={(ev) => handleCEP(ev, props)}
  fullWidth
/>

Can you help me? Thank you!

Incredible your video... It has the beginning, middle and end of a real use case.

I'm trying to implement the component Autocomplete.

But i'm getting this return:

Thanks!

After the 'OnBlur' event in any mandatory field ... all other fields with any validation are triggered as invalid.

One of my approaches was to customize my fields for these types of forms...

...
onBlur={() => helpers.setTouched(true)}
...

But I really don't know what the best approach would be!.

https://codesandbox.io/s/polished-dew-8ns0u?file=/src/pages/index.tsx
Such an exception occurs only in subsequent steps.

Thanks!!

in my case i need to change a lot after check a box so 👍🏻

 <Field
      name={`categories[${j}].choice`}
      type="checkbox"
      value={choice["@id"]}
      component={CheckboxWithLabel}
      Label={{ label: choice.label }}
      onChange={val => {
           setFieldValue(`categories[${j}].choice`, val);
           setFieldValue(`categories[${j}].question`, question["@id"]);
           setFieldValue(`categories[${j}].user`, `/api/users/${user.id}`);
           setFieldValue(`categories[${j}].compaign`, `/api/compaigns/${user.id}`);
       }}
  />

how to use it and thnx