[MDCSelect] wrong behavior when select list element with js and list has empty values

[DarkSilence]

Bug report

After setValue('element') call floating label stays in place and overlaps the selected element.

This only happens if the first element in a list has empty value (data-value="").

Steps to reproduce

https://codepen.io/RomanPaulov/pen/XWbqbZg

1. Click „Show selected index“.
2. Click „Set vegetables“.
3. Click „Show selected index“ again.

Actual behavior

1. When clicking „Show selected index“ component says -1.
2. When clicking „Set vegetables“ vegetables item is selected but floating label stays in place and both overlap each other.
3. When clicking „Show selected index“ next time component still says -1.

Expected behavior

1. I think selected index should be 0.
2. Floating label should be above the selected value.
3. I think selected index should be 2.

Screenshots

Your Environment:

Software	Version(s)
MDC Web	5.1.0
Browser	Chrome Version 80.0.3987.132 (Official Build) (64-bit)
Operating System	Windows 7 x64

Possible solution

This behavior caused by this line I think

material-components-web/packages/mdc-select/foundation.ts

Line 136 in cd53918

if (previouslySelectedIndex !== numbers.UNSET_INDEX) {

When an item with empty value is selected previouslySelectedIndex is equal to -1 and code which clears selected styles won't fire. Which leads to incorrect behavior of getSelectedMenuItem here

material-components-web/packages/mdc-select/component.ts

Line 292 in cd53918

getSelectedMenuItem: () => this.menuElement_!.querySelector(strings.SELECTED_ITEM_SELECTOR),

which picks first list item with mdc-list-item--selected class is present, which will be the first item.

[allan-chen]

Hi Roman,

You're right regarding the cause - this also came up in the second half of issue #5646 - marking as duplicate of that issue for now. Please follow that one for updates. Thanks!