fix sl-tab-show event when closing

docs/resources/changelog.md

@@ -13,6 +13,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a bug in `<sl-select>` that caused the display label to render incorrectly in Chrome after form validation [#1197](https://github.com/shoelace-style/shoelace/discussions/1197)
 - Fixed a bug in `<sl-input>` that prevented users from applying their own value for `autocapitalize`, `autocomplete`, and `autocorrect` when using `type="password` [#1205](https://github.com/shoelace-style/shoelace/issues/1205)
 - Fixed a bug in `<sl-tab-group>` that prevented scroll controls from showing when dynamically adding tabs [#1208](https://github.com/shoelace-style/shoelace/issues/1208)
+- Fixed a bug in `<sl-tab>` that caused `sl-tab-show` to be emitted when activating the close button
 - Updated `@shoelace-style/localize` to 3.1.0
 
 When using `<input type="password">` the default value for `autocapitalize`, `autocomplete`, and `autocorrect` may be affected due to the bug fixed in [#1205](https://github.com/shoelace-style/shoelace/issues/1205). For any affected users, setting these attributes to `off` will restore the previous behavior.

src/components/tab/tab.test.ts

@@ -1,6 +1,8 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
+import type SlIconButton from '../icon-button/icon-button';
 import type SlTab from './tab';
+import type SlTabGroup from '../tab-group/tab-group';
 
 describe('<sl-tab>', () => {
   it('passes accessibility test', async () => {
@@ -88,17 +90,31 @@ describe('<sl-tab>', () => {
   });
 
   describe('closable', () => {
-    it('should emit close event when close button clicked', async () => {
-      const el = await fixture<SlTab>(html` <sl-tab closable>Test</sl-tab> `);
+    it('should emit close event when the close button is clicked', async () => {
+      const tabGroup = await fixture<SlTabGroup>(html`
+        <sl-tab-group>
+          <sl-tab slot="nav" panel="general" closable>General</sl-tab>
+          <sl-tab slot="nav" panel="custom" closable>Custom</sl-tab>
+          <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
+          <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
+        </sl-tab-group>
+      `);
+      const closeButton = tabGroup
+        .querySelectorAll('sl-tab')[0]!
+        .shadowRoot!.querySelector<SlIconButton>('[part~="close-button"]')!;
 
-      const closeButton = el.shadowRoot!.querySelector<HTMLButtonElement>('[part~="close-button"]')!;
-      const spy = sinon.spy();
+      const handleClose = sinon.spy();
+      const handleTabShow = sinon.spy();
 
-      el.addEventListener('sl-close', spy, { once: true });
+      tabGroup.addEventListener('sl-close', handleClose, { once: true });
+      // The sl-tab-show event shouldn't be emitted when clicking the close button
+      tabGroup.addEventListener('sl-tab-show', handleTabShow);
 
       closeButton.click();
+      await closeButton?.updateComplete;
 
-      expect(spy.called).to.equal(true);
+      expect(handleClose.called).to.equal(true);
+      expect(handleTabShow.called).to.equal(false);
     });
   });
 });

src/components/tab/tab.ts

@@ -53,7 +53,8 @@ export default class SlTab extends ShoelaceElement {
     this.setAttribute('role', 'tab');
   }
 
-  private handleCloseClick() {
+  private handleCloseClick(event: Event) {
+    event.stopPropagation();
     this.emit('sl-close');
   }