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?
- 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
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