search

vazco / uniforms

A React library for building forms from any schema.
https://uniforms.tools
MIT License
1.94k stars 239 forks source link

How to scroll to error field? #1297

Closed davidli108 closed 7 months ago

davidli108 commented 7 months ago

Hi, I need some help. I am trying to scroll the page to the first field with an error from the form. I found the similar issue but the reply was not helpful.

Can you please help me with this issue?

kestarumper commented 7 months ago

Hi @davidli108, Could you share the approach that you've tried? A link to the reproduction would be great. Also, if you could link a similar issue, that would also give us a hint.

But in general, you probably want to use scrollIntoView. For that, you'll need the DOM element.

In the context of React, you can use useRef to get access to the .scrollIntoView() API. See this example on StackOverflow.

It might be that you've already tried passing the ref directly to the Field, but I'm not sure if it's forwarded to the HTML DOM element such as <div /> or <input />. If that's the problem, simply wrap the field with some wrapper element like <div />.

To detect errors, you could use, for example, the <AutoForm onValidate={...} />

kestarumper commented 7 months ago

I hope the above helped, and I'm closing this issue. Feel free to reopen if needed.