Page reloads on submit if form is inside drawer component

[ghost]

Bug report

Current Behavior

Submit btn reloads page if Formik is inside callable component like aside drawer. Any variations of prevent default doesn't solve this problem. If I click on submit btn, page reloads, validation doesn't work and it looks like GET request, because I see query in url.

Suggested solution(s)

How could I solve this?

Your environment

Software	Version(s)
Formik	2.4.5
React	18.2.0
TypeScript	4.9.5
Browser	Chrome
npm/Yarn	NPM

[juvpengele]

Can you add more details of the code you have written so that it can be reproduced ?

[ghost]

Can you add more details of the code you have written so that it can be reproduced ?

Sure! Thank you!

Page with carriers and drawer toggling:

CreateCarrierForm component:

Drawer is quite simple. It contains {children} and toggling by isOpened boolean value. If I separate form from the Drawer - everything working as expected. It looks like submit button inside the drawer calls nothing. Changing { Form } from Formik to plain form onSubmit='...' has no result too, same as dealing with Formik prop on Submit.

[juvpengele]

• Is console.log displayed ?
• Can you try

  <Formik
     initialValues={initialValues}}
     validationSchema={createCarrierSchema}
     onSubmit={(values, actions) => {
          actions.setSubmitting(false);
     }}
   >
   ....
  </Formik>

[ghost]

• Is console.log displayed ?
• Can you try

   <Formik
       initialValues={initialValues}}
       validationSchema={createCarrierSchema}
       onSubmit={(values, actions) => {
            actions.setSubmitting(false);
       }}
     >
     ....
   </Formik>

That's the point. This part doesn't work because if I click on 'submit' btn the whole page reloads.

[ghost]

@juvpengele I found the solution. Thank you for your response.

In case anyone needed: