Removing selected option from DOM should result in first selectable option or placeholder being selected

🐛 Bug Report

If the currently selected option in a Select is removed from the DOM, the Select will attempt to maintain the current value, and upon trying to reset its value at the end of slottedOptionsChanged, it will result in setting the selectedIndex to -1, since the value isn't present in the options, and thus show nothing in the display, even if a placeholder option is present.

Preferably, the Select would simply update to the first selectable option, just as it does by default when there is no value set, which, in the case of a placeholder option being present, would show the placeholder value.

💻 Repro or Code Sample

Just go to the Select Storybook, and in the dev tools, remove the first option in the Select. You will see the display become blank.

🤔 Expected Behavior

If a placeholder is present, removing the selected option should result in the placeholder being displayed, otherwise, the first selectable option should be displayed.

😯 Current Behavior

See above.

💁 Possible Solution

Well, the solution, unfortunately, is not to simply stop resetting to the current value when slottedOptionsChange runs. A use-case we must contend with is that in Angular, a value can be set before any options are slotted, and we need to honor that value after the options become slotted.

🔦 Context

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• Version [e.g. 1.8.0]

Start with the Select component's slottedOptionsChanged handling and reproduce the problem in the linked Storybook Select example by removing the selected option. Trace how the current value and selectedIndex are reset, then verify that removal displays the placeholder or first selectable option while preserving values set before options are slotted.