jaredpalmer / formik

Build forms in React, without the tears 😭
https://formik.org
Apache License 2.0
33.91k stars 2.79k forks source link

FieldArray regression due to shouldComponentUpdate changes #3812

Closed xconverge closed 1 year ago

xconverge commented 1 year ago

Bug report

Current Behavior

Parts of fieldarray don't update correctly after https://github.com/jaredpalmer/formik/pull/3784

Expected behavior

Fields update correctly

Reproducible example

https://codesandbox.io/s/formik-example-forked-zffjus

Suggested solution(s)

Additional context

For now I just added this to use the same behavior from previous versions

shouldUpdate={() => true}

Your environment

Software Version(s)
Formik 2.2.10+
React
TypeScript
Browser
npm/Yarn
Operating System
xconverge commented 1 year ago

@probablyup here is a small weird half-baked example that matches what I am seeing. If you revert the formik version, the text field updates fine.

Incase the codesandbox doesnt work:

// Helper styles for demo
import "./helper.css";
import React from "react";
import { render } from "react-dom";

import { Formik, Form, FieldArray } from "formik";

// Here is an example of a form with an editable list.
// Next to each input are buttons for insert and remove.
// If the list is empty, there is a button to add an item.
export const FriendList = () => (
  <div>
    <h1>Friend List</h1>
    <Formik initialValues={{ friend: "" }} onSubmit={() => {}}>
      {({ values, handleChange }) => (
        <Form>
          <FieldArray
            name="friends"
            //shouldUpdate={() => true}
            render={(arrayHelpers) => (
              <input
                type="text"
                id={`friend`}
                name={`friend`}
                value={values.friend}
                onChange={handleChange}
              />
            )}
          />
        </Form>
      )}
    </Formik>
  </div>
);

const App = () => <FriendList />;

render(<App />, document.getElementById("root"));
quantizor commented 1 year ago

Fixing this in the next release, sorry about that.

lancemcmuffin commented 1 year ago

@probablyup any ETA on this? Unfortunately both this and #3796 broke multiple forms within our apps

xconverge commented 1 year ago

@probablyup any ETA on this? Unfortunately both this and #3796 broke multiple forms within our apps

You can see the status here, it looks all in progress and moving quickly https://github.com/jaredpalmer/formik/pull/3814

quantizor commented 1 year ago

https://github.com/jaredpalmer/formik/releases/tag/formik%402.4.1