React-select: Allow select All option in Multiselect

[neok]

will be nice if we have an option in multiselect - ALL
pseudo code

if select ALL
     clear current selected items from select
else if Selected any other option
     clear All and set current value to this option

<select>
<option value=0>All</option>
<option value=1>test</option>
<option value=2>test2</option>
<option value=3>test3</option>
<option value=4>test4</option>
</select>

probably something like this will be useful:
(add withAll={true})

<Select
               name="myselect"
               multi={true}
               value={this.state.data}
               options={this.state.opts}
               withAll={true}
           />

[AlexEscalante]

Please, have a look if you still need this:

https://medium.com/@alex_escalante/react-select-alloptionoptions-with-a-single-click-1ebf5a33fe31

[esinoner]

I inspired from Alex's method, but i changed some section of his code. There is a example i prepared, if you still need, you can check.

[a2441918]

@esinoner @AlexEscalante I would like a checkbox to be rendered in multi-select.

https://codesandbox.io/s/interesting-torvalds-whuz3?fontsize=14

This is my code. Can someone help me on checkbox select for selectAll and unselect as well please?

[LillaEli]

@a2441918 There you go! You just have to find a way not to show 'select all' among selected labels, or alternatively only show that when all is selected!

https://codesandbox.io/embed/upbeat-sun-0q3o4

[a2441918]

@LillaEli Thanks
Trying to get it working
If you get it, please let me know.

[a2441918]

@JedWatson https://codesandbox.io/embed/upbeat-sun-0q3o4

Can you help us get this working if you have some time? Selecting selectAll should show up in the individual tags.

[LillaEli]

@a2441918 Here is the solution! I added a custom ValueContainer component to be able to only show a message, e.g. "All is selected" when select all is checked!

https://codesandbox.io/embed/ecstatic-waterfall-e87xz

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!