Multiple, non-nested Forms sharing Props & Values

[elamje]

🐛 Bug report

I spent quite a bit of time in the sandbox to get you a reproducible example. I would appreciate any and all help with this!

Current Behavior

One page has two Formik components on it. Each Formik/form has a separate submit button that lives outside of the form, via a React Ref. When the submit button for FormA is called, it calls this..current.handleSubmit(). Likewise for FormB.

However, FormA is always rendered first since it's the form that appears when a user navigates that page, then sometimes FormB is rendered when a user switches navigation tabs. When this happens the values from FormA and FormB become 1 combined values field like values={"formAValue1": "x", "formBValue1": "y", etc...}. Like I said, they are two separate form instances, they aren't nested, they don't share a submit button or a ref.

But when you decide to submit one of the forms after they have both been rendered, the values that get submitted are from both formA and formB. I have no idea how this is happening.

Expected behavior

Two separate forms defined on the same page should not share a values object.

Reproducible example

https://codesandbox.io/s/formik-codesandbox-template-nonto

Suggested solution(s)

N/A

Your environment

Software	Version(s)
Formik	1.5.8
React	16.3.2
TypeScript	N/A
Browser	Safari
npm/Yarn	npm
Operating System	MacOS Mojave

[souly1]

hey @elamje , how did you eventually solve this issue?

UPDATE:
search in google reached better results. solutions can be found here:
#1367