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

Fields are unregistered when not in the DOM

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

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.