[MDC Select] Dynamically loaded menu item values can't be set programmatically

Using MDC 5.0.0 JS lib. Created a fiddle of what I’m seeing here: https://jsfiddle.net/jamauss/bdfcanh9/50/

It seems like if all menu items (<li> elements) are present at the time the MDC Select is created, setting the .value property works just fine.

However, if menu items are added afterwards (e.g. json data loaded via ajax call inserting menu items into the DOM), setting the .value property will not cause the items to be set in the list, despite the MDCSelect:change event firing, which seems to indicate the component knows the value is being set. What is interesting is if I set the .selectedIndex property instead, then it will set the item in the list correctly (even if loaded dynamically), but not if I set the .value property. Again, this seems to only apply to menu items loaded/appended after the MDCSelect is created.

Steps to reproduce

see https://jsfiddle.net/jamauss/bdfcanh9/50/

Actual behavior

Item is not being set in the list / no change occurring for what .value is being set to

Expected behavior

Have item in the list get set when the .value property is set

Software	Version(s)
MDC Web	5.0.0
Browser	Chrome 78
Operating System	Win 10

Additional context

This occured after upgrading from a early version of the MDC JS lib (0.48) to 5.0.0

[Pupix]

I have encountered this problem too. Even using selectedIndex creates problems if the select items change. When you change the index it will try to remove the old --selected class but the items doesn’t exist anymore and it throws.

https://github.com/material-components/material-components-web/blob/master/packages/mdc-select/component.ts#L313

[allan-chen]

@GoldenSlam sorry for the late reply. As you might have seen an overhaul of the select component is beginning to roll in, to yield some much needed quality of life improvements. We’ll get to this issue very soon as we polish this component up from the foundation layers and bridge some much needed feature gaps.