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

Form not calling `formatOnBlur` before validating when submitted using Enter key

Open
#1,044 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.