I am using "react-final-form" script for Forms (I have also tried with "react-hook-form") and if I add style to my Inputs then onSubmit doesnt work (it reloads whole page).

I can not figure it out why.

There is snippet with part of my code -> https://codesandbox.io/embed/boring-wind-gnqx5?fontsize=14&hidenavigation=1&theme=dark

If I delete -> FormContainerPart <- Container in App-js then it works.

Thank you for helping!

CodePudding user response：

It's not about styling, but about your generated HTML structure. FormContainerPart is a form so when you're submitting your form (by clicking the button) you're submitting your Form from react-final-form AND your form from FormContainerPart.

And as you're not catching the onSubmit handler on your form by FormContainerPart, well it goes to default navigator behavior, which is: reload the page

So, as there is no need for FormContainerPart to be a form just change your styled to

export const FormContainerPart = styled.div`
...
`