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; -}