[Details] Fix interactive elements in summary, closes #309

docs/docs/components/details.md

@@ -47,6 +47,24 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
 </style>
 ```
 
+### HTML in summary
+
+To use HTML in the summary, use the `summary` slot.
+Links and other interactive elements will still retain their behavior:
+
+```html {.example}
+<wa-details>
+  <span slot="summary">
+    Some text
+    <a href="https://webawesome.com" target="_blank">a link</a>
+    more text
+  </span>
+
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+</wa-details>
+```
+
 ### Grouping Details
 
 Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `wa-show` event.

src/components/details/details.ts

@@ -5,7 +5,7 @@ import { WaAfterShowEvent } from '../../events/after-show.js';
 import { WaHideEvent } from '../../events/hide.js';
 import { WaShowEvent } from '../../events/show.js';
 import { animate, parseDuration } from '../../internal/animate.js';
-import { waitForEvent } from '../../internal/event.js';
+import { getTargetElement, waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
@@ -92,6 +92,13 @@ export default class WaDetails extends WebAwesomeElement {
   }
 
   private handleSummaryClick(event: MouseEvent) {
+    let targetElement = getTargetElement(event);
+
+    if (targetElement?.matches('a, button, wa-button, input, wa-input, textarea, wa-textarea, select, wa-select')) {
+      // Let interactive elements handle their own clicks, fixes #309
+      return;
+    }
+
     event.preventDefault();
 
     if (!this.disabled) {

src/internal/event.ts

@@ -11,3 +11,17 @@ export function waitForEvent(el: HTMLElement, eventName: string) {
     el.addEventListener(eventName, done);
   });
 }
+
+export function getTargetElement(event: Event) {
+  if (event.target instanceof Node) {
+    switch (event.target.nodeType) {
+      case Node.TEXT_NODE:
+      case Node.COMMENT_NODE:
+        return event.target.parentNode as Element;
+      case Node.ELEMENT_NODE:
+        return event.target as Element;
+    }
+  }
+
+  return null;
+}