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 SelectStorybook, 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]
🐛 Bug Report
If the currently selected option in a
Selectis removed from the DOM, theSelectwill attempt to maintain the current value, and upon trying to reset its value at the end ofslottedOptionsChanged, it will result in setting theselectedIndexto -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
Selectwould 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
SelectStorybook, and in the dev tools, remove the first option in theSelect. 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
slottedOptionsChangeruns. 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