diff --git a/packages/tags/src/Tag.ts b/packages/tags/src/Tag.ts index 1e8a3c4bde..1554b5ee91 100644 --- a/packages/tags/src/Tag.ts +++ b/packages/tags/src/Tag.ts @@ -87,6 +87,7 @@ export class Tag extends SizedMixin(SpectrumElement, { const applyDefault = this.dispatchEvent( new Event('delete', { bubbles: true, + cancelable: true, composed: true, }) ); diff --git a/packages/tags/test/tag.test.ts b/packages/tags/test/tag.test.ts index 0217ca2c17..bf17dcbaaa 100644 --- a/packages/tags/test/tag.test.ts +++ b/packages/tags/test/tag.test.ts @@ -12,7 +12,7 @@ governing permissions and limitations under the License. import { elementUpdated, expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { spy } from 'sinon'; +import { spy, stub } from 'sinon'; import '@spectrum-web-components/tags/sp-tag.js'; import '@spectrum-web-components/tags/sp-tags.js'; @@ -186,4 +186,30 @@ describe('Tag', () => { 'Does not respond after `focusout`' ).to.equal(expectedEventCount); }); + it('can have delete event prevented', async () => { + const deleteSpy = spy(); + const handleDelete = (event: Event): void => { + event.preventDefault(); + deleteSpy(); + }; + const el = await fixture( + html` + Tag + ` + ); + + const removeStub = stub(el, 'remove'); + + await elementUpdated(el); + + expect(deleteSpy.called).to.be.false; + + const deleteButton = el.shadowRoot.querySelector( + 'sp-clear-button' + ) as ClearButton; + deleteButton.click(); + + expect(deleteSpy.callCount).to.equal(1); + expect(removeStub.called).to.be.false; + }); });