Provide custom focus implementation

[likerRr]

feature request

It would be nice to specify focus implementation. For example to make smooth scroll to element + Npx above it before focusing:

import createDecorator from 'final-form-focus'

const onFocus = input => {
  const { top } = getOffset(input);
  const scrollTop = top - 50;

  window.scrollTo({
    top: scrollTop,
    behavior: 'smooth',
  });

  input.focus();
}

const focusOnErrors = createDecorator(null, null, onFocus)

[AndyOGo]

@erikras Any plans to support custom focus implementations?

[mattrabe]

My team has rolled its own solution for this, which focuses on the input and smooth-scrolls to it using scrollIntoView. Therefore, we stopped using this library. Our solutions looks like this:

import React from 'react'
import { Form as FinalForm } from 'react-final-form'

const Form = props => (
  <FinalForm {...props}>
    {({
      form: finalFormApi,
      handleSubmit,
    }) => (
      <form
        finalFormApi={finalFormApi}
        {...props}
        onSubmit={event => {
          const invalidField = finalFormApi.getRegisteredFields().find(field => finalFormApi.getFieldState(field).invalid)

          if (invalidField) {
            const targetInput = document.querySelector(`[name="${invalidField}"]`)
            const targetLabel = document.querySelector(`label[for="${invalidField}"]`) || targetInput
            if (targetInput) {
              targetInput.focus({ preventScroll: true })
              targetLabel.scrollIntoView({
                behavior: 'smooth',
                block: 'center',
              })
            }
          }

          handleSubmit(event)
        }}
      >
        {props.children}
      </form>
    )}
  </FinalForm>
)

export default Form

[TheRusskiy]

FYI, here's a PR for this: https://github.com/final-form/final-form-focus/pull/25