addEventListener acts differently on dropdown items

LefterisKoumis — Fri, 29 Apr 2022 01:08:52 GMT

I have two dropdowns. One is to call basemap and another to call a custom widget

<calcite-dropdown label="Dropdown label"> <calcite-button slot="dropdown-trigger">Tools</calcite-button> <calcite-dropdown-group selection-mode="single"> <calcite-dropdown-item label="thebasemaps" id='thebasemaps'>Basemaps</calcite-dropdown-item> <calcite-dropdown-item label="X" id='X'>X widget</calcite-dropdown-item> </calcite-dropdown-group>

So I have the addeventlistener:

document.querySelector("calcite-dropdown-item").addEventListener("click", handleWidgetsClick);

So, when I click on the Basemaps, it displays the basemaps gallery with no issues. When I click on the X widget, no reaction. The handlewidgets is not triggered.

Why the addlistener is not triggered for the X widget?

Re: addEventListener acts differently on dropdown items

JohnGrayson — Fri, 29 Apr 2022 14:29:45 GMT

I don't see any documented events for dropdown-item, but dropdown does have a few events you should try out. I think calciteDropdownSelect probably give you what you're looking for via the selectedItems property.

topic Re: addEventListener acts differently on dropdown items in Calcite Design System Questions

addEventListener acts differently on dropdown items

Re: addEventListener acts differently on dropdown items