final-form / final-form/react-final-form
FormSpy onChange does not respect external change
- Linguagem predominante
- JavaScript
- Estrelas
- 7.4k
- Forks
- 497
- Métricas de merge de PRs
- Nenhum PR com merge em 30d
Descrição
### 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
Guia de contribuição
Direção de pesquisa
Comece com o CodeSandbox vinculado e o uso de FormSpy em TestForm.js; em seguida, acompanhe como o callback onChange recebe valores externos depois que aState muda. Compare esse comportamento com a chamada direta de onChange mostrada na issue. A tarefa estará concluída quando o callback de FormSpy informar o valor atual de aState após alternar o botão e alterar a entrada.
Escrita pelo modelo de indexação a partir do texto da issue.
Avaliação
- Stack de tecnologia
- javascript, react
- Domínio
- frontend
- Tipo de issue
- Bug
- Dificuldade
- 3/5
- Tempo estimado
- 1-2 dias
- Status de atividade
- Estagnada
- Clareza
- Razoavelmente clara
- Facilidade para iniciantes
- 35/100