Required select is valid when no option is selected

[davidkudera]

Describe the bug
Property invalid of <sl-select required> should be true by default because no option is selected yet. Instead it is false.

To Reproduce
I prepared example in Lit playground: example

Expected behavior
The included example should have invalid: true instead of invalid: false by default. To show the correct value, I also included "inner invalid" value which reflects the valid state of the underlying <select> (input.validity.valid).

Desktop (please complete the following information):

• OS: Windows 10
• Browser: chrome
• Version: 90.0.4430.212

[claviska]

This is by design and documented here:

Note that validity is not checked until the user interacts with the control or its containing form is submitted. This prevents required controls from being rendered as invalid right away, which can result in a poor user experience. If you need this behavior, set the invalid attribute initially.

This behavior is more in line with how :user-invalid works. I'm open to feedback on the current behavior, but the reason for it is to reduce the amount of work it takes to deal with client side validation until the fields were interacted with or submitted.

[davidkudera]

Sorry, I didn't notice that in the docs.

In my opinion, developers should handle the state and styling of form fields themselves instead of the library. That's what for example Angular is doing. Example: https://angular.io/guide/form-validation#validating-input-in-template-driven-forms

Here the error message is displayed only when the field state is invalid && (dirty || touched). This (or the built-in CSS classes) can be used also for styling.

The problem is that a new user of this library (me) can expect that the <sl-select> will behave just like standard <select>. This would mean that <sl-select>.invalid reflects the value of <sl-select>.input.validity.valid.

If I had to choose, I would say that <select>.invalid (JS property) should be compatible with the behavior of standard form fields and their JS validity state instead of their CSS validity state. That's what CSS classes are for.

Unfortunately, I can not think of any non-breaking change that would satisfy what I just described and that would also make sense.

The workaround for me is to use const invalid = select.invalid || !select.input.validity.valid but that's just not nice 😄

[claviska]

Admittedly, I didn't think about this too much when I was dealing with form validation. I think you're right, though. The property should probably reflect whether the input is invalid regardless of interaction.

[claviska]

Fixed in 1e4de5f. This will be released in beta.44.