diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md
index f6ca98735..6fe49fdaf 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -28,6 +28,7 @@ Components with the Experimental badge sh
- Fixed a bug in JSX typings that generated the incorrect component imports [issue:1303]
- Fixed a bug in `` that prevented the thumb from receiving focus when clicking/tapping [issue:1312]
- Fixed a bug in `` that caused the shadow to appear below relatively-positioned elements [issue:1326]
+- Fixed a bug in `` that caused it to expand/collapse when clicking on interactive elements in the summary [issue:1252]
- Fixed `` to have `static` positioning by default and `relative` positioning only when used with `` [pr:1346]
- Fixed spacing in `` when both clear and password toggle icons are present [issue:1325]
diff --git a/packages/webawesome/src/components/details/details.ts b/packages/webawesome/src/components/details/details.ts
index 9b58f09ca..13ad982cf 100644
--- a/packages/webawesome/src/components/details/details.ts
+++ b/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;
}
diff --git a/packages/webawesome/src/components/select/select.ts b/packages/webawesome/src/components/select/select.ts
index bbf8120ec..f0fdcac11 100644
--- a/packages/webawesome/src/components/select/select.ts
+++ b/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}
>
diff --git a/packages/webawesome/src/internal/event.ts b/packages/webawesome/src/internal/event.ts
index 797c6fb16..37c0ff556 100644
--- a/packages/webawesome/src/internal/event.ts
+++ b/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;
-}