v6 removes keys from form.<formname>.values object

[anyong]

I'm not sure if this is the intended behavior, so please correct me if I'm wrong.

If you set the initialValue on an input field to a string value, and then delete (i.e., press backspace) the string in the input field, the form.<formname>.values.field property for that input field is missing in the state tree. It seems to me it would make more sense to leave the empty string there, rather than deleting the property.

For me, this came up when using the <formname>.initial and <formname>.values objects to create a JSON patch. I expected the patch to look like this:

{ op: "replace", path: "/field", value: "" }

but instead it looks like this:

{ op: "remove", path: "/field" }

which is incorrect. I am not removing the field from the form, I am simply setting it equal to a null string. That's when I noticed that the key was actually missing from the state tree.

However, I can see that this would be useful in the case where you actually wanted a null-string to eventually resolve to undefined somewhere down the line. Perhaps this should be a prop we can set on the form - emptyStringToNull or something?

[erikras]

Yeah, ever since React v15, #703, the lines between undefined, null and '' as form values have become very blurry. The best path forward is unclear to me.

[anyong]

facebook/react#6222

It seems like the correct thing to do is use "", as undefined would be more appropriate for a form input that didn't exist rather than one for a form with an empty input.

[erikras]

redux-form does pass '' instead of undefined to the input, so that's not the issue. The issue, as I understand it, is what should the data look like upon submission if a field has been touched, but left blank. That, I'm more unclear about.

[anyong]

Right, that's what I meant though - if redux form passes "" to the input, I think it ought to be consistent and pass "" as the value on submit.

Also, if a user wants them to be removed, it's a lot easier to remove keys with a value of "" than it is to figure out which ones are missing and add them back.

_.pickBy(formData, (val, key) => val !== "")

vs.

// need to pass around extra array of fields that are supposed to be on the object
expectedFields.forEach(field => {
    if (!formData.hasOwnProperty(field)) formData[field] = '';
});

But as I mentioned above, a config option passed to reduxForm() also makes sense, then you can just let the user decide which format they want.

[erikras]

The reason the value is getting deleted is to preserve the behavior that if you have a form with no initial values, and you type something into an input, and then you erase it, the form should be pristine again. Or at least that is what has been true so far in this library.

Writing a deepEqual() that returns true for { a: { b: '' } } and {} is pretty complex.

[erikras]

I think this was fixed by #924. Release coming sometime next week.

[erikras]

Published as v6.0.0-alpha.8.

[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.