final-form / final-form/react-final-form
Form not calling `formatOnBlur` before validating when submitted using Enter key
- Dominant language
- JavaScript
- Stars
- 7.4k
- Forks
- 497
- PR merge metrics
- No merged PRs in 30d
Description
I have a very simple form which have a text input. I'm using `format` function and `formatOnBlur: true` to trim the strings. I want to run validations after the string has been trimmed (i.e. after `format` function has been called)
### Are you submitting a **bug report** or a **feature request**?
Bug report.
### What is the current behavior?
It works fine if I type "react " in the input and clicks on submit button. It shows error correctly. But if I hit Enter instead of click, it submits successfully and do not show any error.
### What is the expected behavior?
It should perform validations after formatting the field and should throw the error when I hit Enter key.
### Sandbox Link
https://codesandbox.io/p/sandbox/3gzzkl
### What's your environment?
Latest (you can find these in the sandbox).
Contributor guide
Research direction
Start by reproducing the behavior in the linked CodeSandbox with a formatted text input: compare clicking submit with submitting via Enter. Trace the form submission and formatOnBlur validation paths, then verify that both paths validate the trimmed value and show the expected error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100