React-final-form: [Thoughts] focus first error

[linashredinger]

Hi again.
Maybe you have any thoughts how to make scrolling to first error message using your validation library?

[erikras]

Well, the FormRenderProps given to your form render function _does_ have all the form errors. Actually scrolling them into view is up to you, I'm afraid.

[linashredinger]

Yes, I already found that methods, but what event is better to stick to? Where is the best way to scroll?
componentWillReceiveProps will give to much side effects, onSumbit won't be called when frontend validation fails, form validate function have different purposes than accessing DOM and scrolling.
maybe some hidden component events or calls?

[circlingthesun]

@linashredinger have you figured out how to do this?

[linashredinger]

@circlingthesun, erikras sent me possible solution:

<FormSpy
  subscription={{ submitFailed: true }}
   onChange={(v) => {
    scrollIntoView(document.querySelector('.is-invalid-input'));
  }}
/>

[circlingthesun]

@linashredinger @erikras that works great on the initial submit, however, if the user submits again, 'submitFailed' remains false and the formspy isn't called again. Any suggestions there?

[circlingthesun]

@linashredinger: https://github.com/final-form/final-form-focus. Thanks @erikras!

[justkost]

<FormSpy
  subscription={{ submitFailed: true }}
  onChange={() => {
    const el = document.querySelector('.error')
    if (el) {
        el.scrollIntoView({ behavior: 'smooth' })
    }
  }}
/>

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.