Fix edge case where interactive elements inside <wa-details> would cause it to open/close (#1350)

* fixes #1252

* fixes #1250

* update changelog

packages/webawesome/docs/docs/resources/changelog.md

@@ -28,6 +28,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug in JSX typings that generated the incorrect component imports [issue:1303]
 - Fixed a bug in `<wa-slider>` that prevented the thumb from receiving focus when clicking/tapping [issue:1312]
 - Fixed a bug in `<wa-scroller>` that caused the shadow to appear below relatively-positioned elements [issue:1326]
+- Fixed a bug in `<wa-details>` that caused it to expand/collapse when clicking on interactive elements in the summary [issue:1252]
 - Fixed `<wa-button>` to have `static` positioning by default and `relative` positioning only when used with `<wa-badge>` [pr:1346]
 - Fixed spacing in `<wa-input>` when both clear and password toggle icons are present [issue:1325]
 

packages/webawesome/src/components/details/details.ts

@@ -7,9 +7,10 @@ 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 { getTargetElement, waitForEvent } from '../../internal/event.js';
+import { waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
 import styles from './details.css';
@@ -112,9 +113,27 @@ export default class WaDetails extends WebAwesomeElement {
   }
 
   private handleSummaryClick(event: MouseEvent) {
-    let targetElement = getTargetElement(event);
+    const eventPath = event.composedPath() as HTMLElement[];
 
-    if (targetElement?.closest('a, button, wa-button, input, wa-input, textarea, wa-textarea, select, wa-select')) {
+    // Check if any element in the path is interactive
+    const hasInteractiveElement = eventPath.some(element => {
+      if (!(element instanceof HTMLElement)) return false;
+
+      // Check native interactive elements
+      const tagName = element.tagName?.toLowerCase();
+      if (['a', 'button', 'input', 'textarea', 'select'].includes(tagName)) {
+        return true;
+      }
+
+      // Check for Web Awesome form controls
+      if (element instanceof WebAwesomeFormAssociatedElement) {
+        return !('disabled' in element) || !element.disabled;
+      }
+
+      return false;
+    });
+
+    if (hasInteractiveElement) {
       // Let interactive elements handle their own clicks, fixes #309
       return;
     }

packages/webawesome/src/components/select/select.ts

@@ -493,6 +493,10 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     this.displayInput.focus();
   }
 
+  private handleComboboxClick(event: MouseEvent) {
+    event.preventDefault();
+  }
+
   private handleComboboxMouseDown(event: MouseEvent) {
     const path = event.composedPath();
     const isButton = path.some(el => el instanceof Element && el.tagName.toLowerCase() === 'wa-button');
@@ -944,6 +948,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
               slot="anchor"
               @keydown=${this.handleComboboxKeyDown}
               @mousedown=${this.handleComboboxMouseDown}
+              @click=${this.handleComboboxClick}
             >
               <slot part="start" name="start" class="start"></slot>
 

packages/webawesome/src/internal/event.ts

@@ -11,17 +11,3 @@ 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;
-}