Opt out of field auto-focus; error ordering #504
Replies: 2 comments 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.
-
Having the option to disable autofocus would be very welcome. In my case, I’m dealing with a form with input validation on blur. Some fields are mandatory and initially empty, so that if you blur by focusing another mandatory and empty field, you will get stuck in a perpetual focus/blur loop: Screen.Recording.2024-10-11.at.01.54.58.movApart from this, I feel like it’s more user-friendly to not programmatically change the focus on blur, since it is unexpected and counters the user action: Screen.Recording.2024-10-11.at.01.58.03.mov@edmundhung is this worth creating an issue for? Are you open to a quick PR that adds a boolean Thanks. |
Beta Was this translation helpful? Give feedback.
-
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