Skip to content

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

master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

🏁 Final Form Focus 🧐

NPM Version NPM Downloads Build Status codecov.io styled with prettier

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


Demo


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