🏁 Final Form Focus 🧐


Decorator for 🏁 Final Form that
will attempt to apply focus to the first field with an error upon an attempted form submission.

---


---

* Installation
* Usage
* 🏁 Final Form Usage
* 🏁 React Final Form Usage
* Example
* Focus On Error Example
* API
* createDecorator: (getInputs?: GetInputs, findInput?: FindInput) => Decorator
* getFormInputs: (formName: string) => GetInputs
* Types
* FocusableInput: { name: string, focus: () => void }
* [GetInputs: () => FocusableInput[]](#getinputs---focusableinput)
* [FindInput: (FocusableInput[], {}) => ?FocusableInput](#findinput-focusableinput---focusableinput)

Installation

``bash
npm install --save final-form final-form-focus
`

or

`bash
yarn add final-form final-form-focus
`

Usage

$3

`js
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
`

$3

`js
import React from 'react'
import { Form, Field } from 'react-final-form'
import createDecorator from 'final-form-focus'

const focusOnErrors = createDecorator()
...
onSubmit={submit}
decorators={[ focusOnErrors ]} // <--------- 😎
validate={validate}
render={({ handleSubmit }) =>


Example

$3

Demonstrates how 🏁 Final Form Focus 🧐 works with 🏁 React Final Form.

API

$3

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.

$3

A GetInputs generator that will narrow the list of inputs down to those contained in the named form, i.e. document.forms[formName].

Types

$3

A light abstraction of any input that has a name property and upon which focus()` may be called.

$3

A function that collects a list of focusable inputs that exist on the page.

$3

A function that returns the first element in a list of focusable inputs that has an error