Material-components-web: Select with pre-selected option doesn't float label

[pgbross]

What MDC-Web Version are you using?

0.27.0

What browser(s) is this bug affecting?

Version 64.0.3282.24 (Official Build) beta (64-bit)

What OS are you using?

Fedora 27

What are the steps to reproduce the bug?

1. Create mdc-select
2. Set one of the options as pre-selected with "aria-selected"
3. Observe label is not floated above selection.
4. If the select is clicked, then on making a choice the label is correctly floated.

See https://codepen.io/pgbross/pen/GyqJKg for demo based on MDC select demo.

What is the expected behavior?

If an option is pre-selected the label should float above the selection.

What is the actual behavior?

The label obscures the selected item.

Any other information you believe would be useful?

The logic during initialization appears to set the selected index correctly, but the label is only set to float above in the foundation's open_() method so you get to see the correct selected option but the label remains in its initial position.

[danielweck]

I came across this problem too, so as a workaround I added the mdc-select__label--float-above CSS class to the markup where the aria-selected attribute is set on an element with class mdc-list-item. For example:

<div class="mdc-select__label mdc-select__label--float-above">Options</div>
...
<li class="mdc-list-item" role="option" tabindex="0" aria-selected>Option 1</li>

[acdvorak]

Thanks for filing this issue!

Text field has the same problem, and its readme recommends exactly what @danielweck suggested: manually adding the appropriate class name to your markup.

We could do this for you in our JS (and IMO we should), but as with text field, you will get a FOUC if the page is rendered before the JS is loaded (which frequently happens over slow connections).

So it sounds like we need to:

• [ ] Update MDCSelectFoundation#init() to automatically add the mdc-select__label--float-above class if necessary
• [ ] Update the mdc-select readme to mention this problem, including the markup fix for FOUC