calcite-dropdown-item deprecated 'active' property

Question

If I change 'active' to 'open' for this deprecated property, selectedItems is empty.

https://developers.arcgis.com/calcite-design-system/components/dropdown/

Creating dynamic dropdown

let opt_item = document.createElement('calcite-dropdown-item');
opt_item.setAttribute('id', 'pao-unit-feet');
opt_item.setAttribute('active', '');
opt_item.setAttribute('data-unit-abrv', 'ft');
opt_item.innerHTML = 'Feet';
grp.appendChild(opt_item);

OK Use opt_item.setAttribute('active', '');

Change to opt_item.setAttribute('open', '');

GregoryBologna · Answer

Thanks, Kitty. I had a notion this was the case.

KittyHurley · Answer

Hi @GregoryBologna, the calcite-dropdown deprecated the "active" property, in favor of "open" as you mentioned. However, the calcite-dropdown-item still uses the "active" property to indicate whether the component is selected.

As a side note, calcite-dropdown-item must have a parent calcite-dropdown-group. Not sure if you've already implemented into the code previously, so providing some additional context.

Here's a Codepen sample creating the dropdown items dynamically to the calcite-dropdown-group. When accessed, the accompanying calcite-button, "Get selectedItems" will log calcite-dropdown's "selectedItems" object length to the console.