search

final-form / react-final-form

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

Autosave ignores fields that have been cleared #817

Open Haegin opened 4 years ago

Haegin commented 4 years ago

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

https://codesandbox.io/s/react-final-form-auto-save-on-field-blur-znm9f?file=/index.js

When autosaving a field that has a value in it (in the example either of the name fields show it) after clearing the value no autosave is fired.

What is the expected behavior?

Clearing a value is still a change to the data and should be autosaved normally.

Sandbox Link

https://codesandbox.io/s/react-final-form-auto-save-on-field-blur-znm9f?file=/index.js

This is a copy of the autosave on blur example with defaults put in for firstName and lastName to make it easier to demonstrate. You get the same result on the original by adding a value, triggering the autosave by blurring and then clearing the value.

What's your environment?

Final Form 4.20 React Final Form 6.5.0

MacOS Version 10.15.3 (19D76) Chrome Version 83.0.4103.106 (Official Build) (64-bit)

Other information

It looks like it's caused by this, but I'm not sure there's any way to work around it. https://final-form.org/docs/final-form/faq#why-does-final-form-set-my--field-value-to-undefined

I tried subscribing to the modified fields and setting any fields to "" if they were in modified but not in the values but this breaks with array fields as they appear in modified as fieldname[1] instead of just fieldname. If there's some way to get field names without them being flattened I can work around this.

Haegin commented 4 years ago

After some more digging, using Lodash's set with the modified fields and merging that with the values seems to be working for me but it's feeling like a pretty clunky workaround.

DonRai commented 4 years ago

@Haegin just try to add parse={value => value} to Field. It should help. Because default parse override empty value image

Haegin commented 4 years ago

Thanks @DonRai, though that seems pretty hacky to have to add a parse prop to every field in the form.

Haegin commented 4 years ago

@mhmdAljefri can I ask why this was closed? Has it been fixed or is this intentional behaviour?

mhmdAljefri commented 4 years ago

I thought You find what you need. I will reopen it again