When My user goes through a form, fills in all the fields and is scrolled to the bottom, they click a button to submit the data. A function is called that checks for errors. If there are validation errors the same page is loaded via page loader and a dialog is displayed asking user to fix errors which are displayed in red for each errored field entry using states. Is there any way I can get the browser to scroll up to the first errored field after, or before the dialog is displayed so they start off at the first error ed field instead of manually needing to scroll up and hunt for the errors? Couldn’t find guidance in docs. Thx. for ideas.
Hello Robert,
Automatically scrolling to the first errored field after a page reload is not currently possible, as the scroll position is reset. A practical approach in this case is to highlight the field where the error occurs to help guide the user.
Hi Robert, indeed there is no way to control scrolling or which field has the focus.
We can imagine various improvements to cover this:
- Some new standard actions for scrolling or focus
- Perhaps @ayoub could think of a new custom component button that could perform a scroll’up: Share Your Custom Component Ideas with Us! 🚀
- We also have a backlog entry for surface control / conditional formatting that could eventually cover such thing
Feel free to suggest what would better suit your needs!
Thanks All. I think @mathieu.ferry has great suggestion for a standard action. Scroll to/focus. Thanks!
I am using a Page Loader to navigate in “Preview in Studio” Mode. User scrolls through a long form initially, then clicks “continue” at the bottom of the form. This changes the value on the page loader and loads the new page. However, it looks like the browser does not scroll home when the new page is set in the Page Loader. User needs to know to manually scroll to get to top of the new page. Is this the expected behavior using Page Loader to navigate? Is there anything we can do to get window to scroll back home when value in page loader changes? Is behavior different when previewing in new Tab? Thx for any feedback.
It could be that your Page Loader is inside a page that has its own scrollable content. In that case, the scroll that isn’t resetting likely belongs to the parent page, not the Page Loader itself.
When you change the content inside the Page Loader, the scroll inside the loader resets to the top by default, but the outer scroll (from the parent page) remains unchanged until you manually scroll, which might be what you’re seeing.
Let me know if that sounds like it could be the case!
1 Like
The Page Loader is only item on the main page that others load into. However I saw that i set the height component of that page to 3000px–I recall for some troubleshooting purpose awhile back. I removed the height setting on the main page and all works fine now. Thx!
2 Likes