final-form / final-form/react-final-form
Field registration/initialization happens after input can be interacted with
- 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?
In a form, when registering a new `Field`, the child input element is inserted into the DOM and can be selected/interacted with before FF finishes initializing everything. This results in a value being set and then FF clearing that value in what seems to be an initialisation pass.
### What is the expected behavior?
When an input element gets mounted and placed on screen, FF should not attempt to initialize the values afterwards. I have confirmed this was the behaviour as of `final-form` 4.18.7 and `react-final-form` 6.3.5 via a `resolutions` entry in my package.json.
### Example
This is most obvious in automated testing where a value is entered into an input as soon as the input is available. Here is a section of our tests that show this error:
```
await interactor.filters(0).addRule();
await interactor.filters(0).rules(1).selectOperator('contains');
await interactor.filters(0).rules(1).fillValue('bar');
```
`addRule` adds a repeater row via final-form-arrays. Each row contains two `Field`s: one a `` and the other a text ``.
The `operator` Field is defined as so:
```
{({ input, meta }) => (
{
input.onChange(e);
const newlySelectedOperator = operators.find(o => o.value === e.target.value);
if (newlySelectedOperator?.noValueAllowed) {
clearRuleValue();
}
}}
placeholder=" "
required
/>
)}
```
- On submit, the operator fails its `validate` check because the value is `undefined` for it. If we swap the order of `selectOperator` and `fillValue` in our tests, then the `value` Field fails its own required `validate` check because the value is `undefined`.
- Whichever field we set the value of second does _not_ get nulled out.
- If we inject a manual delay between `addRule` and the filling of the fields, then things also work correctly.
- We know the input elements are being rendered on time because the interactors that set the values would fail if they were not. Also, we have experimentally checked that they are in fact being inserted into the DOM before we attempt to set their values.
### What's your environment?
final-form 4.19.1
react-final-form 6.4.0
### More links
[Direct link to our tests.](https://github.com/folio-org/ui-licenses/blob/af2d29d8db0cc9d5306d9148d24c51d8422d53e0/test/bigtest/tests/term-filters-test.js#L431)
[Direct link to the Field usage.](https://github.com/folio-org/ui-licenses/blob/1a12f2dc814a552870f3067eb017a74d8f5339cd/src/components/LicenseFilters/TermFilters/TermRule.js#L67)
Contributor guide
Assessment
This issue has not been assessed yet.