Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FieldArray regression due to shouldComponentUpdate changes #3812

Closed
xconverge opened this issue May 31, 2023 · 5 comments
Closed

FieldArray regression due to shouldComponentUpdate changes #3812

xconverge opened this issue May 31, 2023 · 5 comments

Comments

@xconverge
Copy link

xconverge commented May 31, 2023

Bug report

Current Behavior

Parts of fieldarray don't update correctly after #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
Copy link
Author

xconverge commented May 31, 2023

@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
Copy link
Collaborator

Fixing this in the next release, sorry about that.

@lancemcmuffin
Copy link

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

@xconverge
Copy link
Author

xconverge commented May 31, 2023

@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
#3814

@quantizor
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants