Scroll to error in react-final-form querySelector doesn't work first time?

Question

I need to add scroll to first error in form. I found few solutions:

1. extra package - doesn't work

2. Code from discussion here

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

My problem is that second case works only second time. Before I submit first time error className doesn't exist yet, it appears only after submit, and el is null. But second and next times it works all the time, if I not remove error className from render.

How can I solve it?

Answer 1

Ok. I found few issues in my project and made package to work. First issue is that this packages works only with form submit and doesn't work with button click, another issue is that my button component didn't have name tag, so I needed to add it. Now it works