CODEWITHSUNDEEP
javascriptreactjssemantic-ui
Shea
Shea

Reputation: 308

How do I implement a multiple selection filter dropdown in Semantic UI React

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}
/>

Upvotes: 0

Views: 3751

Answers (1)

MynockSpit
MynockSpit

Reputation: 449

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!

Upvotes: 1

Related Questions