search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.15k stars 2.14k forks source link

Add invalid styles to mdc-select #291

Closed liabru closed 6 years ago

liabru commented 7 years ago

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?

traviskaufman commented 7 years ago

Good catch. I don't believe that there is any UX anywhere within the spec regarding invalid selects, so we'll need to coordinate with our design team on this.

traviskaufman commented 7 years ago

Design guidance on this is to make the underline for the select red when invalid, same color as for textfields. If this is too subtle, we can also mess around with making the text red and seeing what design says.

traviskaufman commented 7 years ago

Work to be done:

creativenoobie commented 6 years ago

I see @lynnjepsen has closed this issue recently but I am not sure about updates. I'm using unpkg.com for the stylesheet and css and it's not working.

djensen47 commented 6 years ago

Yeah, that's kinda weird. #1479 was closed because it was implemented for checkbox and radio. But for "select menu" that issue references this issue. 🔁

djensen47 commented 6 years ago

@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!

moog16 commented 6 years ago

Reopening...referenced here

djensen47 commented 6 years ago

Thank you.

KentuckyMC commented 6 years ago

I'm missing the required style on a selectbox as well. By default the selectbox get's a label, but no value. The selectbox should also get a required just like the textfields etc.

JoshMayberry commented 2 years ago

It would be great if this had a foundation.styleValidity method like MDCTextfield components do.