Reputation: 3441
My Formik is triggering touched on all fields of form when non submit type button gets clicked. I already know If this is not a submit button, we can add type="button"
. But since it's a third-party component so I cannot change it, How can formik trigger submit only when the actual type="submit"
button clicked?
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={(values, actions) => {
console.log("submit", { values, actions });
}}
enableReinitialize={true}
>
{(props) => {
return (
<Form onSubmit={props.handleSubmit}>
<br />
<div class="row">
{/* Here this component contains buttons,I cannot add type="button" */}
<SomethirdpartyLibWhichContainsButton />
</div>
<div className="d-flex flex-row-reverse mx-3">
<div >
<button className="btn btn-primary" type="submit" >Submit</button>
</div>
</div>
<p>erros: {JSON.stringify(props.errors)} </p>
</Form>
)
}
}
</Formik>
Upvotes: 0
Views: 948
Reputation: 3441
Added prevent default in div, it worked!
const handler = event => {
event.preventDefault()
}
<div class="row" onClick={handler}>
{/* Here this component contains buttons,I cannot add type="button" */}
<SomethirdpartyLibWhichContainsButton />
</div>
Upvotes: 0