-
-
Notifications
You must be signed in to change notification settings - Fork 796
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
data-user-(in)valid attributes set too early #1175
Comments
I'm not seeing any colors show up in that fiddle, but the example in the docs shows that The spec isn't clear on the heuristics, saying only the user must "significantly [interact] with the element." Looking back to this RFC, I chose to activate it on input instead of blur because the former felt more natural and the latter caused validation errors to show up when tabbing through the controls, which was jarring. Perhaps we should move to a combination of input + blur before applying Any thoughts on that? |
Strange, did you use Firefox as mentioned? |
Whoops, forgot support wasn't that great yet. Nevertheless, the rest of my reply stands. |
This is without any doubt a way better solution than now (the best IMHO). Currently, if the app uses nice styles for different validation states, you cannot even enter your email address without the app telling you immediately after the first key stroke that you've done something wrong (which in most cases you have not). UI libraries seem to have different strategies, but not all of them are particular user-friendly. A bit similar to the current Firefox behavior, but subtle differences (editing a required field for the first time but deleting all characters before blur will not trigger an validation warning): Similar to current Shoelace behavior (bad UX): Completely different to the previous ones: |
It took two rounds of me trying to solve this. 😅 The first approach wasn't very flexible, as it required both Since form controls vary in that way — and in the way users interact with them — I found it more useful to provide a customizable list of events that must be emitted before The list is passed to the private readonly formControlController = new FormControlController(this, {
// …
assumeInteractionOn: ['sl-blur', 'sl-input']
}); The controller tracks interactions and only applies In the future, this can be extended even further to allow more complex interactions as needed. For now, it seems to work much better than what we currently have. You can test a couple right now in this example. |
Please go to the Shoelace example "Styling Invalid Form Controls" and enter something in field
Name
.The border of the
Name
field will become green immediately. This is a bug. It should become green afterblur
orsubmit
. Same for thedata-user-invalid
attribute.Please find here an additional demo to compare with original
input
behavior (please use Firefox):https://jsfiddle.net/hts05oaq/3/
The text was updated successfully, but these errors were encountered: