final-form-scroll-to-first-error

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

Thanks to the author of final-form-focus for the sample. =)

Installation

npm install final-form-scroll-to-first-error

or

yarn add final-form-scroll-to-first-error

Usage

🏁 Final Form Usage

import { createForm } from 'final-form'
import { createScrollToErrorDecorator } from 'final-form-scroll-to-first-error'

const form = createForm({ onSubmit })
const decorator = createScrollToErrorDecorator()
const undecorate = decorator(form)

🏁 React Final Form Usage

import React from 'react'
import { Form, Field } from 'react-final-form'
import { createScrollToErrorDecorator } from 'final-form-scroll-to-first-error'

const focusOnErrors = createScrollToErrorDecorator()
...
<Form
  onSubmit={submit}
  decorators={[ focusOnErrors ]} // <----- add here
  render={({ handleSubmit }) =>
    <form onSubmit={handleSubmit}>
    ...
    </form>
  }
/>

Important

Element classes must contain the string "error" when form submit is failed.