From 475d690751b911f33f306e216600064ddd766387 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 13 Apr 2023 09:51:07 -0400
Subject: [PATCH] wait until registered to set initial state; fixes #1292

---
 src/components/tab-group/tab-group.ts | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/tab-group/tab-group.ts b/src/components/tab-group/tab-group.ts
index 0ec053573..9bf1e4751 100644
--- a/src/components/tab-group/tab-group.ts
+++ b/src/components/tab-group/tab-group.ts
@@ -70,6 +70,11 @@ export default class SlTabGroup extends ShoelaceElement {
   @property({ attribute: 'no-scroll-controls', type: Boolean }) noScrollControls = false;
 
   connectedCallback() {
+    const whenAllDefined = Promise.allSettled([
+      customElements.whenDefined('sl-tab'),
+      customElements.whenDefined('sl-tab-panel')
+    ]);
+
     super.connectedCallback();
 
     this.resizeObserver = new ResizeObserver(() => {
@@ -89,20 +94,24 @@ export default class SlTabGroup extends ShoelaceElement {
       }
     });
 
+    // After the first update...
     this.updateComplete.then(() => {
       this.syncTabsAndPanels();
       this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });
       this.resizeObserver.observe(this.nav);
 
-      // Set initial tab state when the tabs first become visible
-      const intersectionObserver = new IntersectionObserver((entries, observer) => {
-        if (entries[0].intersectionRatio > 0) {
-          this.setAriaLabels();
-          this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });
-          observer.unobserve(entries[0].target);
-        }
+      // Wait for tabs and tab panels to be registered
+      whenAllDefined.then(() => {
+        // Set initial tab state when the tabs become visible
+        const intersectionObserver = new IntersectionObserver((entries, observer) => {
+          if (entries[0].intersectionRatio > 0) {
+            this.setAriaLabels();
+            this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });
+            observer.unobserve(entries[0].target);
+          }
+        });
+        intersectionObserver.observe(this.tabGroup);
       });
-      intersectionObserver.observe(this.tabGroup);
     });
   }