addEventListener acts differently on dropdown items

468
1
Jump to solution
04-28-2022 06:08 PM
LefterisKoumis
Occasional Contributor III

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?

0 Kudos
1 Solution

Accepted Solutions
JohnGrayson
Esri Regular Contributor

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.

View solution in original post

0 Kudos
1 Reply
JohnGrayson
Esri Regular Contributor

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.

0 Kudos