sevenryze / final-form-focus

🏁 Final Form "decorator" that will attempt to apply focus to the first field with an error upon an attempted form submission

🏁 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[]
  • FindInput: (FocusableInput[], {}) => ?FocusableInput

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 🏁 Final Form Focus 🧐 works with 🏁 React Final Form.

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 🏁 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.

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