Form InitialValues overrides Field InitialValue

pinkynrg commented 5 years ago

Are you submitting a bug report or a feature request?

bug report

What is the current behavior?

I have some Form initialValues fetched on component did mount. Initial State is empty array.
I have some Fields initialValue set for each of my form fields.
Before the fetch of of my Form initialValues the Field initialValue are correct.
After fetch has completed the initialValues of the Field are set to overwritten with Form InitialValues.

What is the expected behavior?

Field InitialValue should never be overwritten by the Form InitialValues.

What's your environment?

"final-form": "^4.12.0", "react-final-form": "^5.0.1",

Example

https://codesandbox.io/embed/react-final-form-simple-example-qb57e?fontsize=14

Andarist commented 5 years ago

What's your use case? Why do you provide your initialValues in different ways? And why one is async? Doesn't it lead to weird UX?

Internally initialValues is a single object and if you change it somehow after values are being set then everything gets overriden, the line in question is here

bcnichols3 commented 4 years ago

Was hoping to revive this thread as I ran into this issue today on a project:

My architecture is <Form> ---> <DataFetcher> ---> <InputFields>

Data fetcher does several GETs and uses RFF's state as query params. One of my input fields is a checkbox that should be disabled if DataFetcher returns an empty array for a particular one of its GET requests.

I want to initialize its state as false in the <Form> level but also initialize it as {isArrayEmpty} at the Field level.

I realized when I initialized the key-value on the form, it took precedence even over the Field level initialization. My solution for now is to just leave a comment that this thing is initialized on the Field, and coerce a boolean in my fetcher. But this is less-than-ideal.

It's also causing an unnecessary fetch, which I could resolve with yet more hacking, but I was hoping there's a better way?

We're using:

"final-form": "^4.18.6",
"react-final-form": "^6.3.3",

final-form / react-final-form