Add invalid styles to mdc-select

What MDC-Web Version are you using?

0.2.0

What browser(s) is this bug affecting?

All browsers, but most visible in Safari.

What OS are you using?

OSX

What are the steps to reproduce the bug?

1. Create an mdc-select component in a form.
2. Add a default option with no value.
3. Add some more options with values.
4. Add the required attribute to the select.
5. In the browser, change from the default option.
6. Change back to the default option.

The mdc-select component does not apply a class such as mdc-select--invalid nor does it appear to exist in the source code. This should also happen when the form is submitted in an invalid state.

What is the expected behavior?

This should work the same as it already does for mdc-textfield, expected to automatically apply and remove a class such as mdc-select--invalid when the select changes validation state.

What is the actual behavior?

No class is applied and in Safari there is no visual indication that the field is invalid.

Any other information you believe would be useful?

[djensen47]

@lynnjepsen I went through the code in material-components-web/packages/mdc-select/ and, unless I’m missing something, this has not been implemented. I also didn’t see any references to this in any of the CHANGELOG.md notes.

Please re-open. Thanks!

[traviskaufman]

Work to be done:

• Add mdc-select--invalid style
• Add :invalid style (for native control)
• Document these styles
• Document that we do not provide custom validity functions/logic for JS select, only styles
• Ensure invalid styles work for dark mode
• Update demo to showcase functionality