final-form / final-form/react-final-form
FormSpy onChange does not respect external change
- 主要言語
- JavaScript
- スター
- 7.4k
- フォーク
- 497
- PR マージ指標
- 30日以内にマージされた PR はありません
説明
### 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
コントリビューションガイド
調査の方向性
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.
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- javascript, react
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100