From a127b8722e3ef703d1383919d02c095e95f57242 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 22 Feb 2023 14:18:43 -0500
Subject: [PATCH] fix autoload timing issues

---
 docs/components/checkbox.md               |  3 +-
 src/components/qr-code/qr-code.ts         |  2 +-
 src/components/radio-group/radio-group.ts | 35 +++++++++++++----------
 src/components/select/select.ts           | 27 ++++++++++-------
 4 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
index e4c88b3d..e36fbada 100644
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -100,7 +100,8 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
   const errorMessage = `Don't forget to check me!`;
 
   // Set initial validity as soon as the element is defined
-  customElements.whenDefined('sl-checkbox').then(() => {
+  customElements.whenDefined('sl-checkbox').then(async () => {
+    await checkbox.updateComplete;
     checkbox.setCustomValidity(errorMessage);
   });
 
diff --git a/src/components/qr-code/qr-code.ts b/src/components/qr-code/qr-code.ts
index 1beb1999..1a9cb6f4 100644
--- a/src/components/qr-code/qr-code.ts
+++ b/src/components/qr-code/qr-code.ts
@@ -72,7 +72,7 @@ export default class SlQrCode extends ShoelaceElement {
         part="base"
         class="qr-code"
         role="img"
-        aria-label=${this.label.length > 0 ? this.label : this.value}
+        aria-label=${this.label?.length > 0 ? this.label : this.value}
         style=${styleMap({
           width: `${this.size}px`,
           height: `${this.size}px`
diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
index bce615e2..2a9a8643 100644
--- a/src/components/radio-group/radio-group.ts
+++ b/src/components/radio-group/radio-group.ts
@@ -197,27 +197,32 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
   }
 
   private handleSlotChange() {
-    const radios = this.getAllRadios();
+    if (customElements.get('sl-radio') || customElements.get('sl-radio-button')) {
+      const radios = this.getAllRadios();
+      radios.forEach(radio => (radio.checked = radio.value === this.value));
 
-    radios.forEach(radio => (radio.checked = radio.value === this.value));
+      this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'sl-radio-button');
 
-    this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'sl-radio-button');
+      if (!radios.some(radio => radio.checked)) {
+        if (this.hasButtonGroup) {
+          const buttonRadio = radios[0].shadowRoot!.querySelector('button')!;
+          buttonRadio.tabIndex = 0;
+        } else {
+          radios[0].tabIndex = 0;
+        }
+      }
 
-    if (!radios.some(radio => radio.checked)) {
       if (this.hasButtonGroup) {
-        const buttonRadio = radios[0].shadowRoot!.querySelector('button')!;
-        buttonRadio.tabIndex = 0;
-      } else {
-        radios[0].tabIndex = 0;
-      }
-    }
+        const buttonGroup = this.shadowRoot?.querySelector('sl-button-group');
 
-    if (this.hasButtonGroup) {
-      const buttonGroup = this.shadowRoot?.querySelector('sl-button-group');
-
-      if (buttonGroup) {
-        buttonGroup.disableRole = true;
+        if (buttonGroup) {
+          buttonGroup.disableRole = true;
+        }
       }
+    } else {
+      // Rerun this handler when <sl-radio> or <sl-radio-button> is registered
+      customElements.whenDefined('sl-radio').then(() => this.handleSlotChange());
+      customElements.whenDefined('sl-radio-button').then(() => this.handleSlotChange());
     }
   }
 
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 23a0f7c4..aa1e2b72 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -422,18 +422,23 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
     const values: string[] = [];
 
     // Check for duplicate values in menu items
-    allOptions.forEach(option => {
-      if (values.includes(option.value)) {
-        console.error(
-          `An option with a duplicate value of "${option.value}" has been found in <sl-select>. All options must have unique values.`,
-          option
-        );
-      }
-      values.push(option.value);
-    });
+    if (customElements.get('sl-option')) {
+      allOptions.forEach(option => {
+        if (values.includes(option.value)) {
+          console.error(
+            `An option with a duplicate value of "${option.value}" has been found in <sl-select>. All options must have unique values.`,
+            option
+          );
+        }
+        values.push(option.value);
+      });
 
-    // Select only the options that match the new value
-    this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
+      // Select only the options that match the new value
+      this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
+    } else {
+      // Rerun this handler when <sl-option> is registered
+      customElements.whenDefined('sl-option').then(() => this.handleDefaultSlotChange());
+    }
   }
 
   private handleTagRemove(event: CustomEvent, option: SlOption) {