final-form / final-form/react-final-form
Fields are unregistered when not in the DOM
- Dominant language
- JavaScript
- Stars
- 7.4k
- Forks
- 497
- PR merge metrics
- No merged PRs in 30d
Description
### Are you submitting a **bug report** or a **feature request**?
Bug report
### What is the current behavior?
Field are unregistered, causing meta data (dirty/valid/etc) to be lost, when they are removed from the DOM. The meta data is regained once the field is brought back into the DOM.
See the code sandbox attached for how the Button cannot property stay enabled when the collapsible panel has been closed once a field value is adjusted.
Steps to reproduce:
1. Open "Address" panel, then type in any value. Notice that the button is now enabled.
2. Collapse "Address" panel.
Notice that:
- the button is now disabled even though fields have been modified.
- form is considered pristine even though fields have been modified.
- "dirtyFields/visited/modified/touched" under form state is empty though address was modified
3. Open "Address" panel.
Notice that:
- expected form states comes back
- button is now property enabled
### What is the expected behavior?
Fields remain registered upon removal from the DOM, ensuring other subscribers access to it and the form's values and meta states.
Removing elements from the DOM when not in view can be to optimize view performance; it is not necessarily an intent to remove the field from the form.
### Sandbox Link
https://codesandbox.io/s/expansion-panel-with-field-zusgx
### What's your environment?
react-final-form: 6.3.0
final form: 4.18.5
Contributor guide
Assessment
This issue has not been assessed yet.