mjangir / formik-wizard-form Goto Github PK

I think it would be usefull to add ability to passing props to Form component.

For example I need to prevent form submitting on enter, so I want to add onKeyDown handler on Form

<Form onKeyDown={ e => { if ((e.key === 'Enter') && (e.target.tagName !== 'BUTTON' || e.target.type !== 'submit')) { e.preventDefault() } }}>

Bug report

Current Behavior

If a form step is invalid, the next button will be disabled after clicking on the previous button

Expected behavior

The valid step should be seen as valid and the next button should be enabled

Reproducible example

The materialui sample: https://codesandbox.io/s/material-formik-wizard-form-h37hs?from-embed

• fill the 1st step with valid fields
• click on next
• click on next. the step is invalid, so it disables the next button
• click on prev. the first step is valid, so the next button should be enabled again.

Suggested solution(s)

force a validation when going back ?

Additional context

Your environment

I am facing some weird bugs with this package.
if I use npm package , I got this error :

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `FormikWizardProvider`.

but if I use files from ./src (like example) the error will disappear.

Yup scheme example:

someFieldsArray: yup.array().of(yup.object().shape({
  fieldName: yup.string().required(),
  anotherFieldName: yup.string().requried(),
})),

stepValidation file ->
const stepValidator = ({errors}) => ...???

If you revisit the wizard after submission, it is still at the final step. How can I reset step index ?

Hi, I'd suggest you provide an adaptation to React Native. Thanks

This looks awesome, especially the ability to validate each step.

One question, the browser's forward and back buttons are disabled in your example, but could they be used to navigate between steps? That's what I like about this solution, the forward and back buttons still work as expected, and there is a Prompt component that prevents data loss if the user accidentally tries to navigate away from the form (which could potentially be done through site navigation or a bookmark even if the forward and back buttons are disabled).

Love the project. but will this be maintained in the future? Don't see any updates for the last 2 years.

Hi mjangir,
Thanks for sharing your code. Do you by chance have an example of using
a 3rd Party control like "react-select" in your wizard that maintains state and onchange events as you use the navigation buttons to go back and forth in the wizard. Thanks so much for the reply.

I have found the section with examples and the section with bootstrap is empty:

https://formikwizard.manishjangir.com/docs/examples/bootstrap

Can you please take a look at this link? If you can the sample, it would be very helpful to fix the link. 👍

Thanks for this library, it is really helpful.

Jan