question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using keepDirtyOnReinitialize fails to update fields on successful submit

See original GitHub issue

Version 6.4.3

My form is a FieldArray of notifications that can be removed with the trash can icon, as seen below. There is also a cancel button that resets the form.

image

The form’s initial values come from a list of notifications from the server. I need to use keepDirtyOnReinitialize, because otherwise, if I destroy a saved notification and then click the cancel button, the destroyed notification will reappear.

While using keepDirtyOnReinitialize fixes this, it causes a new problem: when I add a new notification to the form and submit, the id field for the newly created notification does not get updated on reinitialize.

The payload for the INITIALIZE action does look correct, as you can see below.

image

The payload contains the id, so I expect that my hidden input will be updated, but as you can see below, the input has no value.

image

Therefore, if I click the trash can icon to destroy that item, the id is not present so the destroy call is never made:

const renderNotification = (member, index, fields, destroy) => {
  const remove = () => {
    const { id } = fields.get(index);

    if (id) {
      destroy(id);
    }

    fields.remove(index);
  };

If I turn keepDirtyOnReinitialize back to false, then my id fields update as expected, but as I stated earlier, I need this flag to be true so that resetting the form does not revive destroyed items.

I can’t link to the repo and it might be too much to post all of the code, so let me know if there are specific areas you’d like to see. It would take some effort to create a smaller, shareable example that reproduces this.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:16 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
sslotskycommented, Feb 3, 2017

As posted above:

const renderNotification = (member, index, fields, destroy) => {
  const remove = () => {
    const { id } = fields.get(index);

    if (id) {
      destroy(id);
    }

    fields.remove(index);
  };

The destroy(id) call is an action creator that deletes the item from the server. Now that I review that action creator, however, I see that it’s not removing the notification from the store. I updated that and it seems to work now. Can’t believe I missed it before. Of course I feel silly now.

Thanks so much for talking through this with me and leading me to my error!

0reactions
lock[bot]commented, Jun 1, 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Read more comments on GitHub >

github_iconTop Results From Across the Web

`keepDirtyOnReinitialize` does not reinitialize the values in form
I've got an issue with enableReinitialize and keepDirtyOnReinitialize. I wanna change values of initialValues property and keep them dirty.
Read more >
Reset values in React Final Form w/ keepDirtyOnReinitialize
The Solution is simple— if the form submitted successfully: first change keepDirtyOnReinitialize to false -> perform form reset form.reset() -> ...
Read more >
How to prevent React-Final-Form to reset the form values after ...
But is there any way to prevent the react-final-form from resetting the input values of the form after user successfully submit the form....
Read more >
reduxForm(config:Object)
Creates a decorator with which you use redux-form to connect your form ... field2: 'error' } then the submission errors will be added...
Read more >
Form will not reset after submit - Power Platform Community
Solved: I have multiple drop down text fields linked to a Sharepoint list in my App. Everything works fine but when I submit...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found