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

FormSpy onChange does not respect external change

未關閉
#653 3 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視
主要語言
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

貢獻指南

開啟貢獻指南

評估

這個 Issue 還沒有評估資料。

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。