Without this change, the Select component doesn't know the Options (items in the internal List component) after onMount. So it can't tell which Options are added/removed.
The change might be simpler adding bind:accessor={list} to the List. But I didn't choose it because List seems to want to hide its accessor as the implementation details. I'll rewrite to try if you prefer.
Approach
Without this change, the
Selectcomponent doesn't know theOptions(items in the internalListcomponent) afteronMount. So it can't tell whichOptions are added/removed.To fix the root cause, I created a new events to
List:SMUIList:mountItemandSMUIList:unmountItem, which tells the parent when some of its children are added or removed. Then, I implemented an event handler ofSelectfor the new events to update the internal list and calllayoutOptions.layoutOptionsshould always be called whenever the options are updated (Ref. https://github.com/material-components/material-components-web/blob/f80ac92b08dfa1b59cd9faf74f3d19a4b134993e/packages/mdc-select/foundation.ts#L235-L239.Another Option
The change might be simpler adding
bind:accessor={list}to theList. But I didn't choose it becauseListseems to want to hide itsaccessoras the implementation details. I'll rewrite to try if you prefer.