Decorator for 🏁 Final Form that will attempt to apply focus to the first field with an error upon an attempted form submission.
npm install --save final-form final-form-focusor
yarn add final-form final-form-focusimport { createForm } from 'final-form'
import createDecorator from 'final-form-focus'
// Create Form
const form = createForm({ onSubmit })
// Create Decorator
const decorator = createDecorator()
// Decorate form
const undecorate = decorator(form)
// Use form as normalimport React from 'react'
import { Form, Field } from 'react-final-form'
import createDecorator from 'final-form-focus'
const focusOnErrors = createDecorator()
...
<Form
onSubmit={submit}
decorators={[ focusOnErrors ]} // <--------- 😎
validate={validate}
render={({ handleSubmit }) =>
<form onSubmit={handleSubmit}>
... inputs here ...
</form>
}
/>Demonstrates how 🏁 Final Form Focus 🧐 works with 🏁 React Final Form.
A function that takes an optional function to collect a list of focusable inputs on the page and provides a 🏁 Final Form Decorator that will focus on the top-most input on the page with an error when a form submission fails. If no getInputs parameter is provided, it will use a generic one that will return all inputs that appear in document.forms. If no findInput parameter is provided, it will use a generic one that matches the name attribute of the focusable input with the path in the error object.
A GetInputs generator that will narrow the list of inputs down to those contained in the named form, i.e. document.forms[formName].
A light abstraction of any input that has a name property and upon which focus() may be called.
A function that collects a list of focusable inputs that exist on the page.
A function that returns the first element in a list of focusable inputs that has an error
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent