React-select: A better multi-select UI

[A-H-Pooladvand]

Please consider to make a better UI for multi-select mod, It's currently is select2 like but the problem is that multi-select's height is dynamic and it's really a pain to use it in small spaces

Here is a screenshot to explains better the problem
https://www.photobox.co.uk/my/photo/full?photo_id=501023337976

And here is a suggestion plugin which has a better multi-select UI in my opinion
https://developer.snapappointments.com/bootstrap-select/examples/

Thank you.

[gwyneplaine]

Hi @A-H-Pooladvand, the link you provided for the screenshot is not viewable. Please provide us with either a working screenshot link or a codesandbox example of your use case, otherwise we won't be able to triage / assess this issue

[sahibjotsaggu]

+1 to this. If I understand @A-H-Pooladvand, this is what he means:

This is straight from https://codesandbox.io/s/6l1y4p55m3?module=/example.js with the label names given larger strings and the Select dropdown is given a fixed width (to cause this overflow).

EDIT:

I just ran the project locally and it seems that the overflow problem does not exist on the website:

Currently looking into why the CodeSandbox example is causing problems.

[sahibjotsaggu]

https://codesandbox.io/s/m3j1pv11jp

So it seems that providing <Select /> with a value for the width causes the overflow error.

In the link above, I wrapped the <Select /> component with a wrapper and gave that a fixed width and it's working as expected.

So I guess the best thing to do is to not control <Select />'s width but instead, create a wrapper around it.

EDIT:

Or.. Actually I think @A-H-Pooladvand is talking about not having the <Select /> component expand its height and have the options horizontally scrolling within the view.

[francisrod01]

@sahibjotsaggu how can I use it and add any options to state?
Please let me see an example.

[sahibjotsaggu]

@francisrod01 can you please explain what you mean? I don't understand.

[francisrod01]

@sahibjotsaggu The isMulti property doesn't used in the doc but it exist some examples for it.

https://github.com/JedWatson/react-select/blob/master/docs/examples/BasicMulti.js

https://github.com/JedWatson/react-select/blob/master/docs/examples/CreatableMulti.js

I want to see an example implementing a setState(...) increasing a value as multiple options.

[sahibjotsaggu]

Like this: https://codesandbox.io/s/pwyvz4671j

You just bind value to the state and then using the onChange prop, you can simply update the state.

[francisrod01]

Thanks for your code example, @sahibjotsaggu ! :+1:

[A-H-Pooladvand]

@gwyneplaine Sorry for the late response, I've been very busy lately
What I mean is that when react-select is in small container like col-sm-2 and when you select multiple options the select's wrapper height will change according to its selected options, so I wish that you could change multi select ui, and what I suggest is to place a checkbox before every option so user can select as many options as he wants then he can close the select rather than opening the select every time and this will solve height issues in small places too.
Thanks for your consideration.

[jossmac]

@A-H-Pooladvand the good news is that you can replace any of the components, so please feel free to make "a better multi-select UI".

[jossmac]

@gwyneplaine @sahibjotsaggu do either of you have any objections to closing this? It's a feature request to make react-select look more like bootstrap-select. I think that the components and styles APIs should suffice.

[gwyneplaine]

No objections, I agree that this is something that users can already do.
@A-H-Pooladvand let me know if anything is unclear in the docs, you should be able to configure react-select to fit your use case using a combination of the components API and the styles API as Joss has specified.

I'm closing this issue now. Happy to continue this discussion if need be.