fix label when items are dynamically added

docs/getting-started/changelog.md

@@ -6,6 +6,10 @@ Components with the <sl-badge type="warning" pill>Experimental</sl-badge> badge
 
 _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
 
+## Next
+
+- Fixed a bug where dynamically changing menu items in `sl-select` would cause the display label to be blank [#374](https://github.com/shoelace-style/shoelace/discussions/374)
+
 ## 2.0.0-beta.33
 
 - Fixed a bug where link buttons could have incorrect `target`, `download`, and `rel` props

src/components/select/select.ts

@@ -120,9 +120,7 @@ export default class SlSelect extends LitElement {
 
   firstUpdated() {
     this.resizeObserver = new ResizeObserver(() => this.resizeMenu());
-
+    this.syncItemsFromValue();
-    // We need to do an initial sync after the component has rendered, so this will suppress the re-render warning
-    requestAnimationFrame(() => this.syncItemsFromValue());
   }
 
   disconnectedCallback() {
@@ -271,10 +269,13 @@ export default class SlSelect extends LitElement {
 
   @watch('helpText')
   @watch('label')
-  handleSlotChange() {
+  async handleSlotChange() {
     this.hasHelpTextSlot = hasSlot(this, 'help-text');
     this.hasLabelSlot = hasSlot(this, 'label');
-    this.syncItemsFromValue();
+
+    // Wait for items to render before gathering labels otherwise the slot won't exist
+    const items = this.getItems();
+    await Promise.all(items.map(item => item.render)).then(() => this.syncItemsFromValue());
   }
 
   handleTagInteraction(event: KeyboardEvent | MouseEvent) {