Attempting to debug and/or fix dropdown component interactivity issue
All checks were successful
Build, Test, and Publish (to Private NPM Registry) UI Components Library / publish (push) Successful in 1m0s

This commit is contained in:
Alan Bridgeman 2026-07-08 20:09:52 -05:00
parent 8f7ad270f1
commit bdd97dfbca
2 changed files with 4 additions and 2 deletions

View file

@ -76,7 +76,7 @@
<%- chevronSvg %>
<% } %>
</div>
<div id="<%= typeof menuId !== 'undefined' ? menuId : 'dropdown-menu' %>" class="dropdown-menu<%= typeof menuStyleClasses !== 'undefined' ? ' ' + menuStyleClasses.join(' ') : '' %>" hidden popover>
<div id="<%= typeof menuId !== 'undefined' ? menuId : 'dropdown-menu' %>" class="dropdown-menu<%= typeof menuStyleClasses !== 'undefined' ? ' ' + menuStyleClasses.join(' ') : '' %>"<%# hidden%> popover>
<slot name="dropdown-menu"></slot>
</div>
</template>

View file

@ -22,13 +22,15 @@ export class Dropdown extends ComposableElement {
_toggled(event) {
//event.preventDefault();
console.log('Dropdown content toggled.');
this.currentElemIndex = -1;
const triggerElem = this.shadow.querySelector(`[aria-controls="${event.currentTarget.id}"]`);
const isOpen = event.newState === 'open';
triggerElem.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
event.currentTarget.toggleAttribute('hidden');
//event.currentTarget.toggleAttribute('hidden');
}
/** Keydown handler for the dropdown (arrow key navigation) */