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

FormSpy onChange does not respect external change

Aperta
#653 3 commenti 0 reazioni 0 assegnatari Vedi su GitHub
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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.