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

FormSpy onChange does not respect external change

Abierto
#653 3 comentarios 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
JavaScript
Estrellas
7.4k
Forks
497
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

### 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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.