diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index d5ae5c32e..7f25c4e5b 100644 --- a/docs/resources/changelog.md +++ b/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 `` 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 `` 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 `` that prevented scroll controls from showing when dynamically adding tabs [#1208](https://github.com/shoelace-style/shoelace/issues/1208) +- Fixed a bug in `` that caused `sl-tab-show` to be emitted when activating the close button - Updated `@shoelace-style/localize` to 3.1.0 When using `` 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. diff --git a/src/components/tab/tab.test.ts b/src/components/tab/tab.test.ts index 479de2df3..fa277344b 100644 --- a/src/components/tab/tab.test.ts +++ b/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('', () => { it('passes accessibility test', async () => { @@ -88,17 +90,31 @@ describe('', () => { }); describe('closable', () => { - it('should emit close event when close button clicked', async () => { - const el = await fixture(html` Test `); + it('should emit close event when the close button is clicked', async () => { + const tabGroup = await fixture(html` + + General + Custom + This is the general tab panel. + This is the custom tab panel. + + `); + const closeButton = tabGroup + .querySelectorAll('sl-tab')[0]! + .shadowRoot!.querySelector('[part~="close-button"]')!; - const closeButton = el.shadowRoot!.querySelector('[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); }); }); }); diff --git a/src/components/tab/tab.ts b/src/components/tab/tab.ts index 961d0c735..9db04c541 100644 --- a/src/components/tab/tab.ts +++ b/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'); }