Impossible to clear last field in a form when initialValues is an empty object and the form was submitted

[pdeszynski]

A bug report

What is the current behavior?

Given that the form is being passed an empty object to initialValues prop, and then the form has been submitted, after clearing last field of this form (for e.g. with a backspace button) it will still return last field's value in onSubmit handler.

An example is here:

https://jsfiddle.net/piteer/o4wjnjyz/2/

You need to fill one field and then press submit, then clear the field and again press submit. This will return last submitted value.

Also worth mentioning: If you fill any other field and submit a form again, last previous field will again be empty as it should be.

What is the expected behavior?

Value send to a onSubmit handle should represent form state, not the last submitted state.

Other informations

It can be workaround by checking if initialValues object is empty and passing null instead. Then the form will work as expected.

[nikaspran]

We've also been running into this.

Just to give a little more background, this is the line in the CHANGE reducer that causes it:

let result = state
const initial = getIn(result, `initial.${field}`)
if (initial === undefined && payload === '') {
  result = deleteInWithCleanUp(result, `values.${field}`)
} else if (payload !== undefined) {
  result = setIn(result, `values.${field}`, payload)
}

The behavior here is that if initialValues is initially an empty object, initial will be undefined. Thus clearing an input field (i.e. backspacing to an empty string value) will always result in the formState.values prop being deleted entirely. Then this line in createReduxForm will cause the submit value to equal initialValues (since values === undefined):

let values = getIn(formState, 'values') || initial

This bug appears when initialValues is initially an empty object but later on gets changed to a non-empty object, i.e. when storing the server response and passing it back around to props.

Example use case:

A concrete use case is storing last submitted form values in the URL:

1. Start out with an empty object for initialValues due to no params being in the url (we pass URL params to the component via props, which then passes these on to a reduxForm initialValues)
2. Fill a field, submit the form
3. We update the url on submit, thus initialValues now has a value (i.e. { query: 'a' })
4. Clear the field and try submitting the form again, it uses the previous form values instead of the current ones

A potential workaround

Instead of setting initialValues to an empty object, undefined seems to work, i.e.:

--- const r = (state = { initialValues: {} }, action) => {
+++ const r = (state = { initialValues: undefined }, action) => {

The only problem with this is that it will submit with an empty string for the cleared value, which might or might not work for you.

[erikras]

Fix released in v7.4.0.

[lock]

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.