final-form / react-final-form

🏁 High performance subscription-based form state management for React
https://final-form.org/react
MIT License
7.39k stars 481 forks source link

Specify `parse={null}` behavior on the form level #384

Open ThiefMaster opened 5 years ago

ThiefMaster commented 5 years ago

When creating a form to edit an existing object the empty-to-undefined conversion is problematic for optional fields that can be cleared by the user. Having to specify parse={null} in every field is rather annoying and not DRY - also, it's easy to forget.

It would be nice if there was an option to set this behavior on the <FinalForm> itself.

phzimmermann commented 5 years ago

Anyway it would be nice to have empty strings or null values in the values object. So you could do a patch or a spread to an existing object and it would overwrite the fields correctly.

zsolt-dev commented 5 years ago

this is the most important feature missing in final-form.

I would create two options:

  1. First would provide empty value of the correct type empty text text fields-> '' empty multiselect -> [] empty checkbox -> false

  2. second option would be to use NULL for the currently undefined values empty text field: -> null empty multiselect -> null empty checkbox -> null

It is causing a lot of issues currently when working with graphql. parse={null} on the <Field is not a solution since if the field is untouched, it is not parsed (left undefined)

flybayer commented 5 years ago

Wow, this discovered this bug in my app. It's totally NOT expected that '' is converted to undefined by default.

iloveip commented 4 years ago

@zsolt-dev Hi there, did you figure out any way to parse untouched fields?

RoystonS commented 1 year ago

Why does react-final-form add a default parse behaviour of converting empty string to undefined?

final-form itself doesn't do that, so I don't follow why the React wrapper is adding this extra parsing logic.

(Like @flybayer, this was totally unexpected, and has just led to a hard-to-find bug being raised in the app I'm working on.)