Radio group's validity is evaluated on focus
Closed this issue · 9 comments
When you tab to the first radio group demo on "Validation in Iron Form" page, the group, being required, is marked invalid immediately. Once you hit an arrow key to select a value, the error goes away.
Also, why is the label red when the field is invalid? That’s not how Lumo should work.
Label color change was added in cef0ff8
Should we use same red background for radio buttons as we have for text-field?
Appears to be also broken in Firefox 61 because of webcomponents/shadydom#275
After pinning webcomponentsjs to 1.2.0I'm unable to reproduce this issue
Should we use same red background for radio buttons as we have for text-field?
That’s one option, yes. I was thinking the radio button appearance wouldn’t need to change at all, the error message is enough, but if there is no error message then it’s not clear where the error is.
Also, the group is missing the required indicator from the label (see text-field). That should also turn red when the group is invalid, so it is in theory enough (but might be a bit too subtle to notice in practice).
Nit: the group label should follow the example guidelines and use sentence case (“Complexity level” and not “Complexity Level”).
Also, the group is missing the required indicator from the label (see text-field). That should also turn red when the group is invalid
BTW we need to add has-value state attribute in order to implement it like in the text-field.
Should we extract another ticket for these theme fixes? It looks like a blocker to me.
Separated ticket it's better for tracking
@tomivirkki it seems not happening anymore it validates on blur but not on focus as shown in screenshot. Can you verify at https://cdn.vaadin.com/vaadin-radio-button/1.1.0-beta2/demo/#radio-group-validation-demos ?
Still happens (on FF as Sergey mentioned)
@web-padawan radio-group already implements has-value what should be done then?.
I think documenting the attribute, and adding missing CSS rules should be ok, right ?