final-form / final-form/react-final-form
FormSpy onChange does not respect external change
- Lingua principale
- JavaScript
- Stelle
- 7.4k
- Fork
- 497
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
### Are you submitting a **bug report** or a **feature request**?
**bug report**
### What is the current behavior?
I am creating a form wizard, where I have external values which'll affect how the wizard behaves. Currently I am implementing a feature where the form state will be cached to localStorage on change. I solved this through exposing a `onChange` prop from the form wizard, allowing creating custom onChange methods which could utilise external values.
The issue I then encountered was that when sending the onChange method to a `FormSpy`, it did not respect the external value having changed. This would be respected if just calling the onChange method in the wizard render method as for instance `{onChange()}`.
An example of this could be seen here, where the unexpected behaviour is demonstrated: https://codesandbox.io/s/naughty-grothendieck-unp10
- When writing in the input field, `onChangeCallback` is reporting that `aState` is false
- Click the button to toggle `aState` to be true
- Now, when writing in the input field, `onChangeCallback` is reporting that `aState` is false
If changing TestForm.js:
```diff
{onChange && }
+ {onChange()}
First Name
```
It now writes two lines, where the one triggered by TestForm.js will report `aState` to be true, whilst `FormSpy` will insist it's false.
### What is the expected behavior?
- When writing in the input field, `onChangeCallback` is reporting that `aState` is false
- Click the button to toggle `aState` to be true
- Now, when writing in the input field, `onChangeCallback` is reporting that `aState` is true
### Sandbox Link
https://codesandbox.io/s/naughty-grothendieck-unp10
### What's your environment?
react 16.10.2
react-final-form 6.3.0
final-form 4.18.5
Latest MacOs in latest Chrome.
### Other information
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Start with the linked CodeSandbox and the FormSpy usage in TestForm.js, then trace how its onChange callback receives external values after aState changes. Compare that behavior with the direct onChange call shown in the issue. Done means the FormSpy callback reports the current aState value after toggling the button and changing the input.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, react
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100