Formik: Multiple Forms on the same page

[tylergaugler16]

How to prevent strange behavior when having two formik components on the same page❓

I have a login and signup form on the same page. Both forms work totally fine in isolation. The main structure I have is this:

<SignupAndLoginWrapper>
  <LoginForm />
  <SignupForm />
</SignupAndLoginWrapper>

And this is an example of how one of my forms looks:

<Form
          key="login-form"
          initialValues={{ email: "", password: "", test: "" }}
          onSubmit={(values, { setSubmitting }) => {
            this.handleLogin(values);
            setSubmitting(true);
          }}
        >
          {({ values, errors, touched, handleSubmit, handleChange }) => (
            <form onSubmit={handleSubmit} key="login-form-form" id="login-form">
              <div className="columns is-gapless is-centered">
                <div className="column is-10 ">
                  <Field
                    key="login.email"
                    name="email"
                    label="Email"
                    component={TextInput}
                    validate={isEmail}
                  />
                </div>
              </div>
              <div className="columns is-gapless is-centered">
                <div className="column is-10">
                  <Field
                    key="login.password"
                    name="password"
                    label="Password"
                    component={PasswordInput}
                    validate={required}
                  />
                </div>
              </div>
              <div className="columns is-gapless is-centered">
                <div className="column is-10">
                  <Field
                    key="login.test"
                    name="test"
                    label="Test"
                    component={PasswordInput}
                    validate={required}
                  />
                </div>
              </div>
              <div className="columns is-gapless is-centered">
                <div className="column is-10 ">
                  <button
                    className="button medium-button purple-button is-centered-block"
                    type="submit"
                  >
                    Submit
                  </button>
                </div>
              </div>
            </form>
          )}
        </Form>

What's happening is that my signup form works fine, but for my login form none of the inputs work. And when i use the react inspector, I notice that the signup fields are inside my Login component (when in my actual component they are not).

When i do display: none on my signup form, the login form behaves normal btw.

I've tried using keys on both forms to keep them distinct, but that hasnt worked. Any ideas?

[tylergaugler16]

Realizing my custom animations were leading the input fields to appear on top of each other and lead to this confusing behavior. Closing issue.

[edwinwong90]

@tylergaugler16 rules of form never nest them <form>.

[philals]

Came here from a google.

I had two forms toggled by state on the same page. Giving them different keys solved my weird behavior.

[mateja176]

@philals Is there any documentation regard the key prop?

[philals]

@mateja176 Hi really sorry I tried looking for the code to remind myself - I even looked at my commits for that day...

I think I was referring to React's standard key prop. https://reactjs.org/docs/lists-and-keys.html

I have a feeling adding this to the Formik component allows it to have two forms on the same page.

If anyone is able to confirm my memory that would be great.

[mateja176]

@mateja176 Hi really sorry I tried looking for the code to remind myself - I even looked at my commits for that day...

I think I was referring to React's standard key prop. https://reactjs.org/docs/lists-and-keys.html

I have a feeling adding this to the Formik component allows it to have two forms on the same page.

If anyone is able to confirm my memory that would be great.

I'd be inclined to agree if the prop types of Form didn't explicitly contain a key prop. There may be more to it, since the key prop is usually managed by React. Nevertheless, this might be a red herring.