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.
Solved! Go to 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 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.
Thank you. I will change my script to use combobox. Currently, I don't see any advantages for using dropdown over combobox.