JarCasting
🏁
Final Form Focus
🧐
Decorator for
Installation
npm install --save final-form final-form-focus
or
yarn add final-form final-form-focus
Usage
🏁
Final Form Usage
import { 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 normal
🏁
React Final Form Usage
import 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>
}
/>
Example
Focus On Error Example
Demonstrates how
API
createDecorator: (getInputs?: GetInputs, findInput?: FindInput) => Decorator
A function that takes an optional function to collect a list of focusable inputs on the page and provides a 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.
getFormInputs: (formName: string) => GetInputs
A GetInputs generator that will narrow the list of inputs down to those contained in the named form, i.e. document.forms[formName].
Types
FocusableInput: { name: string, focus: () => void }
A light abstraction of any input that has a name property and upon which focus() may be called.
GetInputs: () => FocusableInput[]
A function that collects a list of focusable inputs that exist on the page.
FindInput: (FocusableInput[], {}) => ?FocusableInput
A function that returns the first element in a list of focusable inputs that has an error
