final-form / final-form/react-final-form-arrays
Field Value Keys are dropped if field is empty
- Dominant language
- TypeScript
- Stars
- 210
- Forks
- 69
- PR merge metrics
- No merged PRs in 30d
Description
### The current behaviour?
If a field is emptied by the user after typing into it, the key:value pair is automatically removed from the values array.
e.g. in the following code:
```
{({ fields }) =>
fields.map((name, index) => (
Cust. #{index + 1}
))
}
```
Returns the following values when "`My Name`" is typed into the field:
`{
"customers": [
{
"firstName": "My Name"
}
]
}`
But when the firstName field is emptied, the customers[0].firstName key and value is removed from the object, although the object still remains present:
`{
"customers": [
{}
]
}`
### What is the expected behaviour?
React-Final-Form accepts an [allowNull](https://final-form.org/docs/react-final-form/types/FieldProps#allownull) prop. The default behaviour intending to prevent null values to ensure controlled inputs. Fields inside an array should follow this behaviour.
This, however, isn't an issue relating to controlled inputs. I dynamically render my form inputs based on an array of fields sent to initialValues and removing the key/pair from the values object removes the field from the form the key no longer exists.
**The suggestion**
If the field is emptied and you are left with an empty value, the values object returns:
`{
"customers": [
{
"firstName": ""
}
]
}`
Perhaps if allowNull is true, the entire key/value pair is removed from the object
### What's your environment?
This is re-creatable in the [Basic Example](https://codesandbox.io/s/kx8qv67nk5?file=/index.js)
### Other information
NB: If anyone has any alternate suggestions to get around this then I'd be happy to hear them!
Contributor guide
Assessment
This issue has not been assessed yet.