React Hook Form don't register inputs when using Material UI stepper

Viewed 944

I'm using the default example from Material UI steppers, which can be found here, along with React Hook Form, but when I register the fields, e.g on the first step, they are not submitted when the form is submitted at the last step, but the fields from the last step, where the submit button is, are submitted.

I tried to use the provider but it didn't work, I tried to elevate where I use useForm() and use useCallback(()=> {}, []) so the reference is not lost between renders, but nothing worked... I have three levels (base component -> modal (tried useForm() here / provide the context) -> stepper (tried useForm() here - each step is another component) and I provided the context at the right place so I don't understand why it is not storing even though I keep the reference and the data in a context. Any tips?

React Hook Form 6.0.8 and Material UI 5 alpha 4. I used the 6.0.2 and 5 alpha 2 and the same result.

1 Answers

If you are using react hook form v6 then use FormProvider. Just make sure to define the forms for each step properly and set the state correctly for each form correctly upon clicking on next/back/finish.

Since you have not shared the code, it is not possible to say what is causing your issue. But the code in the below mention demos should surely help you.

Working demo - react-hook-form 6.0.8 and material-ui 5.0 alpha-2

If you are using react-hook-form version 5, then you can use FormContext. See working demo here

Related