MuliSelect with labeled selections

[geforcelive]

Summary

We need a replacement for well known select2 component. We are using it while filtering in terms of in-set clause. The proposition is to extend the MultiSelect component, so we could see the list of options that we currently choosed, not only its count.

Justification

We started transision of UI to new look and feel using react and carbon components. In case of replacing filtering we have found that our one component have no equal replacemnt in react carbon components.

Desired UX and success metrics

On the picture below one can see the desired behavior on the UI:

We would like to either choose by selecting a option or type a option to narrow down the list of results.

Each option should contain a pair of id and value. Under the hood we would like to pass the ids to the backend for further filtering.

"Must have" functionality

Displaying currently choosed elements is a must have.

Specific timeline issues / requests

It is on our near roadmap. We plan to deliver first increment this year.

Available extra resources

We could organize some extra resources based on the cost of the enhancment.

[asudoh]

@IBM/carbon-designers Any thoughts...? Thanks!

[designertyler]

I'd suggest detaching the selected tag and dropdown areas rather than trying to build all that functionally in a small area. This would also give you the space you need to show tags with longer names and could be possible with the tag and multi select components today.

[geforcelive]

Any chance or plans to have such component in future carbon components?

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.

[aagonzales]

Related issue: https://github.com/carbon-design-system/carbon-components-react/issues/1374

[dakahn]

@carbon-design-system/design This has come up a few times recently in our internal slack and it seems like a few people are interested in contributing this to Carbon. Is this something we intend to work on and support?

[shixiedesign]

Let's discuss as a group next week @dakahn

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[laurenmrice]

not stale

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[laurenmrice]

not stale

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale]

As there's been no activity since this issue was marked as stale, we are auto-closing it.

[jeanservaas]

not stale

[drewdistefano]

Can some progress be made on this? This would be very useful for the Product Discovery team.

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale]

As there's been no activity since this issue was marked as stale, we are auto-closing it.

[aagonzales]

@geforcelive @drewdistefano
Sorry for the very delayed response. Carbon has reviewed your proposal and think that the MultiSelect dropdown is the correct component to use here and that the added functionality of raising the full tags to be in the field is not scalable (what would happen if the user select 20 items?). As Tyler suggested a more scalable solution would need to be designed that doesn't include the bounds of the field and perhaps served more as a filter control than a dropdown.

We will not be pursuing this design as it currently is spec-ed for a Carbon enhancement but if this is something you team feels it still needs you of course can build it on your own. Please feel free to submit alternate designs and we will re-open the issue.