Bridgeman-Accessible/ba-web-components
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Details

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
src/components/dropdown/dropdown.ejs
View file

@ -76,7 +76,7 @@
<%- chevronSvg %> <%- chevronSvg %>
<% } %> <% } %>
</div> </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> <slot name="dropdown-menu"></slot>
</div> </div>
</template> </template>

4
src/components/dropdown/dropdown.mjs
View file

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