Use updated value for formatOnBlur format func

[michaltk]

When there's a format function that's called onBlur it passes the
current value from state to that format function.

react-final-form/src/Field.js

Line 113 in 41d24d6

state.change(format(state.value, state.name))

This causes that when the field's onChange is called from within the onBlur
the formatOnBlur function is not getting the updated value.
Rather, it has the previous value passed to it, so when
formatting the value it ends up formatting and returning the previous value.

This pr changes to pass the current updated value from props.reactFinalForm's state,
to the format func so it always gets the current value.
See Demo

[erikras]

Things have changed with v5, but if this is still a problem, we can address it.

I'm not understanding your concern. In your demo, you should just be doing the toUpperCase().trim() in the format function. I'm not understanding why you would want to call onChange first?

[michaltk]

I've updated to v5 and this still seems to be an issue.
See updated small demo of where this is needed.
We have a stand alone email input component that shows the suggested domain while typing.
It then updates the email to the suggested domain onBlur by calling the onChange with the suggestion. (This is a standard form field that an work with any form).
We are wrapping this input with final-form and would like to trim the email onBlur by passing formatOnBlur to the final-form Field.
The issue is that the format function still have the value as the email without the suggested domain
so it formats that and the suggestion never gets set.

[erikras]

I've implemented what I understand your requirements to be:

1. No whitespace around email address (trim())
2. Autocomplete should work
3. Product name should turn to all uppercase on blur

Did I miss any?

You don't need formatOnBlur for the email address.

[michaltk]

With the example, it wouldn't allow spaces to be typed.
For a states auto complete, that would not work. We would need to allow typing a space and therefore would have to have the format only formatOnBlur.

See updated state auto complete demo

[codecov]

Codecov Report

Merging #465 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff          @@
##           master   #465   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          14     16    +2     
  Lines         231    225    -6     
  Branches       57     55    -2     
=====================================
- Hits          231    225    -6

Impacted Files	Coverage Δ
src/useField.js	100% <100%> (ø)	⬆️
src/FormSpy.js	100% <0%> (ø)	⬆️
src/useFormState.js	100% <0%> (ø)	⬆️
src/useForm.js	100% <0%> (ø)	⬆️
src/ReactFinalForm.js	100% <0%> (ø)	⬆️
src/index.js	100% <0%> (ø)
src/useLatest.js	100% <0%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 13008e3...75822bd. Read the comment docs.

[codecov]

Codecov Report

Merging #465 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff          @@
##           master   #465   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          15     10    -5     
  Lines         235    210   -25     
  Branches       58     62    +4     
=====================================
- Hits          235    210   -25

Impacted Files	Coverage Δ
src/Field.js	100% <ø> (ø)	⬆️
src/FormSpy.js	100% <0%> (ø)	⬆️
src/ReactFinalForm.js	100% <0%> (ø)	⬆️
src/useField.js
src/useFormState.js
src/useForm.js
src/useConstant.js
src/useWhenValueChanges.js
src/flattenSubscription.js
... and 3 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4ca1ce7...ac0b686. Read the comment docs.

[michaltk]

@erikras Thanks for checking into this!
I've updated this pr to work with v6..

[erikras]

I don't doubt that this fixes your problem, but I'd like to have a test that demonstrates the problem and fails with this code commented out, but passes with it included. Either you can do it, or I can try to get around to it later this week...

[erikras]

Your test is pretty good, but it's not, the parlance of the React Testing Library motto, "how a user would use the library". Primarily: handleBlur would not have access to "fire event" on the input DOM node.

[Andarist]

Why, why, why you'd want to call imperatively onChange inside the onBlur? this sounds like a misusage to me, but maybe I'm just not aware about the use case - would be good to describe it 🤔

[erikras]

I agree that this feels wrong somehow. I'll have to give more thought to the motives behind this change. It also created an untested code branch. I'm not sure when the ternary on line 115 would ever flip the other way.

[erikras]

Published in v6.3.0.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.