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

Feature Request: empty form and remove focus on successful submit without full reset that is final-form-focus friendly?

Open
#577 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.4k
Forks
497
PR merge metrics
No merged PRs in 30d

Description

final-form 4.18.2
final-form-focus 1.1.2
react-final-form 6.3.0

I had a small UX issue with a password change form. With an earlier version, we would clear the form with `form.reset()` but with a recent update the `submitSucceeded` state, which we use to show our success notification to the user, now gets reset. We've refactored to a new approach that works but I was curious if others see an opportunity to bake this in a future feature.

Our issue was that a field retained focus when using enter on submit and that the initialize feature had to fire after the function completes otherwise it looks like final-form-focus focuses the first field. This is all to prevent the user being focused into a field after submission, therefore, triggering a required validation state when they leave the focus of the empty field after submission.

```jsx
const onSubmit = useCallback(
async function onForgotPasswordFormSubmit(values, form) {
try {
await updatePassword(values)
// clears focus if submit via enter
document.activeElement.blur()
// re-initialize form AFTER submitSuccess to prevent focus on first field
setTimeout(() => form.initialize({}), 20)
return undefined
} catch (error) {
return mapErrors(error)
}
},
[updatePassword]
)
```

Contributor guide

Open the contributing guide

Research direction

Start with the supplied onSubmit example and compare form.reset(), form.initialize({}), submitSucceeded, and final-form-focus behavior across the listed versions. Done means a concrete feature or API behavior is agreed that clears the form and removes focus without losing submitSucceeded, with successful-submit and focus scenarios verified.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.