Fix error on close

docs/components/tab-group.md

@@ -96,14 +96,13 @@ Add the `closable` prop to a tab to show a close button. This example shows how
 <script>
   const tabGroup = document.querySelector('.tabs-closable');
 
-  tabGroup.addEventListener('sl-close', event => {
+  tabGroup.addEventListener('sl-close', async event => {
     const tab = event.target;
     const panel = tabGroup.querySelector(`sl-tab-panel[name="${tab.panel}"]`);
 
-    // If the tab is active, show the previous tab before removing it
+    // Show the previous tab if the tab is currently active
     if (tab.active) {
-      const previousTab = tab.previousElementSibling;
+      tabGroup.show(tab.previousElementSibling.panel);
-      tabGroup.show(previousTab ? previousTab.panel : 'general');
     }
 
     // Remove the tab + panel

docs/getting-started/changelog.md

@@ -20,6 +20,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug where `sl-hide` would be emitted twice when closing an alert with `hide()`
 - Fixed a bug in `sl-color-picker` where the toggle button was smaller than the preview button in Safari
 - Fixed a bug in `sl-tab-group` where activating a nested tab group didn't work properly [#299](https://github.com/shoelace-style/shoelace/issues/299)
+- Fixed a bug in `sl-tab-group` where removing tabs would throw an error
 - Fixed a bug in `sl-alert`, `sl-dialog`, `sl-drawer`, `sl-select`, and `sl-tag` where the close button's base wasn't exported so it couldn't be styled
 - Removed `text` type from `sl-badge` as it was erroneously copied and never had styles
 - Updated `sl-tab-group` so the `active` prop is reflected to the attribute

src/components/tab-group/tab-group.tsx

@@ -64,6 +64,7 @@ export class TabGroup {
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleScrollLeft = this.handleScrollLeft.bind(this);
     this.handleScrollRight = this.handleScrollRight.bind(this);
+    this.syncActiveTabIndicator = this.syncActiveTabIndicator.bind(this);
   }
 
   componentDidLoad() {
@@ -260,6 +261,14 @@ export class TabGroup {
 
   syncActiveTabIndicator() {
     const tab = this.getActiveTab();
+
+    if (tab) {
+      this.activeTabIndicator.style.display = 'block';
+    } else {
+      this.activeTabIndicator.style.display = 'none';
+      return;
+    }
+
     const width = tab.clientWidth;
     const height = tab.clientHeight;
     const offset = getOffset(tab, this.nav);
@@ -318,7 +327,7 @@ export class TabGroup {
                 part="active-tab-indicator"
                 class="tab-group__active-tab-indicator"
               />
-              <slot name="nav" />
+              <slot name="nav" onSlotchange={this.syncActiveTabIndicator} />
             </div>
           </div>
           {this.hasScrollControls && (
@@ -332,7 +341,7 @@ export class TabGroup {
         </div>
 
         <div ref={el => (this.body = el)} part="body" class="tab-group__body">
-          <slot />
+          <slot onSlotchange={this.syncActiveTabIndicator} />
         </div>
       </div>
     );