final-form / final-form/react-final-form-arrays

Field Value Keys are dropped if field is empty

Open
#178 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.