From bf1ddc91d06e1dc04bc9411295bd6c72644284b1 Mon Sep 17 00:00:00 2001 From: bendera Date: Fri, 26 Dec 2025 11:44:09 +0100 Subject: [PATCH 1/2] Prevent collapse on action icon click --- .../actions-stop-propagation.html | 64 +++++++++++++++++++ src/vscode-collapsible/vscode-collapsible.ts | 6 +- 2 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 dev/vscode-collapsible/actions-stop-propagation.html diff --git a/dev/vscode-collapsible/actions-stop-propagation.html b/dev/vscode-collapsible/actions-stop-propagation.html new file mode 100644 index 000000000..7d7525d67 --- /dev/null +++ b/dev/vscode-collapsible/actions-stop-propagation.html @@ -0,0 +1,64 @@ + + + + + + VSCode Elements + + + + + + + +

Component demo

+
+ + + + +

Lorem ipsum

+

Lorem ipsum

+

Lorem ipsum

+

Lorem ipsum

+

Lorem ipsum

+ + + +
+ + diff --git a/src/vscode-collapsible/vscode-collapsible.ts b/src/vscode-collapsible/vscode-collapsible.ts index 3363f2ce3..64095ee57 100644 --- a/src/vscode-collapsible/vscode-collapsible.ts +++ b/src/vscode-collapsible/vscode-collapsible.ts @@ -84,6 +84,10 @@ export class VscodeCollapsible extends VscElement { } } + private _onActionClick(event: PointerEvent) { + event.stopPropagation(); + } + override render(): TemplateResult { const classes = {collapsible: true, open: this.open}; const actionsClasses = { @@ -123,7 +127,7 @@ export class VscodeCollapsible extends VscElement {

${heading}${descriptionMarkup}

- +
From 0a5767605545583e4f606dd58371882b93847e7b Mon Sep 17 00:00:00 2001 From: bendera Date: Fri, 26 Dec 2025 12:29:38 +0100 Subject: [PATCH 2/2] Add test --- .../vscode-collapsible.test.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/vscode-collapsible/vscode-collapsible.test.ts b/src/vscode-collapsible/vscode-collapsible.test.ts index fb7679ef2..f99e4f47f 100644 --- a/src/vscode-collapsible/vscode-collapsible.test.ts +++ b/src/vscode-collapsible/vscode-collapsible.test.ts @@ -1,4 +1,7 @@ +/* eslint-disable @typescript-eslint/no-unused-expressions */ +import {$, clickOnElement} from '../includes/test-helpers.js'; import {VscodeCollapsible} from './index.js'; +import '../vscode-icon/index.js'; import {expect, fixture, html} from '@open-wc/testing'; describe('vscode-collapsible', () => { @@ -104,4 +107,17 @@ describe('vscode-collapsible', () => { expect(detail).to.deep.equal({open: true}); }); + + it('prevents collapse on action icon click', async () => { + const el = await fixture(html` + + + `); + + const actionIcon = $('#action-icon'); + await clickOnElement(actionIcon); + + expect(el.open).to.be.true; + }); });