Skip to content

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

License

Notifications You must be signed in to change notification settings

final-form/final-form-focus

Repository files navigation

🏁 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

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

About

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

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published