Prevent collapse on action icon click

bendera · bendera · commit 5e0011a28ad4 · 2025-12-26T12:40:23.000+01:00
diff --git a/dev/vscode-collapsible/actions-stop-propagation.html b/dev/vscode-collapsible/actions-stop-propagation.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VSCode Elements</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    >
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+    <script>
+      const logEvents = (selector, eventType) => {
+        document.querySelector(selector).addEventListener(eventType, (ev) => {
+          console.log(ev);
+        });
+      };
+    </script>
+  </head>
+
+  <body>
+    <h1>Component demo</h1>
+    <main>
+      <vscode-demo>
+        <vscode-collapsible
+          always-show-header-actions
+          heading="Test"
+          style="display: block; width: 500px"
+        >
+          <vscode-icon
+            name="file-add"
+            action-icon
+            aria-role="button"
+            id="btn-file-add"
+            title="New File"
+            slot="actions"
+          ></vscode-icon>
+          <vscode-icon
+            name="refresh"
+            action-icon
+            aria-role="button"
+            id="btn-refresh"
+            title="Refresh"
+            slot="actions"
+          ></vscode-icon>
+          <p>Lorem ipsum</p>
+          <p>Lorem ipsum</p>
+          <p>Lorem ipsum</p>
+          <p>Lorem ipsum</p>
+          <p>Lorem ipsum</p>
+        </vscode-collapsible>
+      </vscode-demo>
+      <script>
+        logEvents('#btn-file-add', 'click');
+        logEvents('#btn-refresh', 'click');
+      </script>
+    </main>
+  </body>
+</html>
diff --git 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 {
           <h3 class="title">${heading}${descriptionMarkup}</h3>
           <div class="header-slots">
             <div class=${classMap(actionsClasses)}>
-              <slot name="actions"></slot>
+              <slot name="actions" @click=${this._onActionClick}></slot>
             </div>
             <div class="decorations"><slot name="decorations"></slot></div>
           </div>
