I would like to implement a dropdown component that shows the selected options upon expanding.
Here is what I have so far, but it tokenizes the selected options, which I don't want. I want them to look similar to a single selection dropdown where they are just shaded/highlighted, but there can be multiple selected.
<Dropdown
text="Filter"
icon="filter"
className="icon"
fluid multiple selection labeled button
options={filterOptions}
/>
As you noticed, Semantic doesn't (currently) support a whole lot of customization regarding multi-select. So, you have two basic options. First, you could use the subcomponents implement the details of dropdown yourself (including all the events that get fired) and only rely on Semantic for the styling. If you choose this route, you might as well write your own.
Alternatively, you can hack together a solution using some Semantic's built-ins.
To do this, you need to change two main behaviors:
1st - you need hide the tags. You can do this by modifying the renderLabel method on the dropdown. Returning null from that method will prevent the tags from being rendered.
2nd - you need to unhide the selected options in the dropdown. There's no built-in way to do this, but you can fake it by inserting a new duplicate option for every option selected. Make sure you attach an onClick to allow deselecting of objects.
Here's a working example: https://stackblitz.com/edit/so-49442592
There's a lot of quirks to it, so feel free to ask questions!
