Opt out of field auto-focus; error ordering #504
Stanaland-Michael-bah
started this conversation in
Ideas
Replies: 1 comment 1 reply
-
Thanks for sharing! This does help me understand what people need if they would like to put all errors at the tops. Is sorting the field names by their order on the dom tree enough? |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
We're planning a modernization of a very large and crusty React Router+Redux app, and I was looking at Conform as inspiration or a possible solution to dramatically improve the DX of our many forms.
We have some pretty strict accessibility requirements, and one of them is that form errors must be listed out at the top of the form in an alert (this WCAG pattern: https://www.w3.org/WAI/tutorials/forms/notifications/#listing-errors) ... this is in addition to the typical error message under the offending field.
When the user submits a form with errors, the alert gets rendered and focus moves to the alert itself. But this conflicts with Conform's behavior of focusing the first invalid field. I spent a little time going through the docs and GitHub issues, and I don't see an easy way around that.
The second challenge is around getting a list of invalid fields in the order they appear on the page. Because
form.allErrors
is missing the input ids adform
andfields
are proxy objects, it's not straight-forward to construct that list, but it is doable. A simplistic example (ignoring the fact that fields and have multiple errors) might look like thisBut we're relying on the order of
form.allErrors
, which doesn't really work currently. Ifform.allErrors
was sorted and included the id, that would be amazing.I know most other Conform users wont have this issue, and part of what makes Conform great is the simplicity and excellent accessibility behavior out of the box, but maybe something to think about for future releases.
Beta Was this translation helpful? Give feedback.
All reactions