Dropdown Groups - get a single selection

[LefterisKoumis]

I have a group of  dropdown. Only one item can be selected from all groups.However, I cannot display a single selection since clicking on a different group it will display the selection for that group.

So, to remove it, I have to use selection-mode= none. However, by doing so, I cannot get the selected innerText.

Is there a way to allow the display of only one selection from all groups? if not, how can I get the selecteditem if I use selection-mode="none"?

I also experiment with using selection-mode="single" and place it at the calcite-dropdown to cover both groups. However, it seems that after selecting few times, it records the selection from one group only.

Thank you.

Codepen 

@KittyHurley 

[KittyHurley · Accepted solution]

@LefterisKoumis Dropdown doesn't support selection across groups, but a similar workflow could be achieved with the Dropdown Item's icon-start and/or icon-end attributes: https://codepen.io/geospatialem/pen/poQMKjY using icons to group items. 

Also, while not fulfilling the same design as Dropdown, for more complex workflows Combobox could be used with multiple groups and one selection: https://codepen.io/geospatialem/pen/xxQvWjz. 

[LefterisKoumis]

Thank you. I will change my script to use combobox. Currently,  I don't see any advantages for using dropdown over combobox.