diff --git a/dev/vscode-collapsible/actions-stop-propagation.html b/dev/vscode-collapsible/actions-stop-propagation.html index 7d7525d6..f07d7858 100644 --- a/dev/vscode-collapsible/actions-stop-propagation.html +++ b/dev/vscode-collapsible/actions-stop-propagation.html @@ -46,7 +46,7 @@

Component demo

aria-role="button" id="btn-refresh" title="Refresh" - slot="actions" + slot="decorations" >

Lorem ipsum

Lorem ipsum

diff --git a/src/vscode-collapsible/vscode-collapsible.test.ts b/src/vscode-collapsible/vscode-collapsible.test.ts index f99e4f47..e4ec21e0 100644 --- a/src/vscode-collapsible/vscode-collapsible.test.ts +++ b/src/vscode-collapsible/vscode-collapsible.test.ts @@ -120,4 +120,21 @@ describe('vscode-collapsible', () => { expect(el.open).to.be.true; }); + + it('prevents collapse on decoration icon click', async () => { + const el = await fixture(html` + + + `); + + const actionIcon = $('#action-icon'); + await clickOnElement(actionIcon); + + expect(el.open).to.be.true; + }); }); diff --git a/src/vscode-collapsible/vscode-collapsible.ts b/src/vscode-collapsible/vscode-collapsible.ts index 64095ee5..c0d99b67 100644 --- a/src/vscode-collapsible/vscode-collapsible.ts +++ b/src/vscode-collapsible/vscode-collapsible.ts @@ -84,7 +84,7 @@ export class VscodeCollapsible extends VscElement { } } - private _onActionClick(event: PointerEvent) { + private _onHeaderSlotClick(event: PointerEvent) { event.stopPropagation(); } @@ -127,9 +127,11 @@ export class VscodeCollapsible extends VscElement {

${heading}${descriptionMarkup}

- + +
+
+
-