React-select: How can i create options with checkbox and toggle selected if their checkbox is checked?

[alexeikaratai]

[AchinthaReemal]

Hi, I too would like to know the possibility of creating a similar dropdown with checkboxes.

[czue]

This can be done by specifying removeSelected={false} and then using a custom optionRenderer that shows a checked/unchecked box based on this.props.isSelected.

It should be pretty easy to adapt this example to suit your needs.

Note that removeSelected is a quite new option and requires one of the latest releases (1.0.0 or 1.1.0)

[czue]

@maganuk hard to say without more information. are you catching the onMouseDown event like is done in the example?

note that isSelected should be referenced from the option via: this.props.isSelected

[maganuk]

@czue thanks for your reply. I was catching the onMouseDown event. For some reason the isSelected prop is not getting set. Anyways, I solved it by adding a isSelected property for each option. Now I'm having another issue, and was hoping you could suggest a solution. My checkboxes all seem to be working fine, but when I click on a label for a checkbox, the dropdown automatically closes. I've already set closeOnSelect={false} and autoBlur={false}. If I remove the line this.props.onSelect(this.props.option, e) in the mousedown event, the dropdown stays open. Also directly clicking on the checkbox also keeps the dropdown menu open. I'm doing a e.preventDefault() and e.stopPropagation(), but this hasan't helped. Any ideas? Thanks

[czue]

@maganuk sorry not sure on that one.

[TerrillT5]

Hey @maganuk, did you ever figure it out? I'm looking for the same answer

[maganuk]

Hey @TerrillT5 I decided to create my own component instead of using this library.

[ajaycodingmart]

I also had same issue. I figured out a way after battling with it for one day.

componentWillMount() {
var featuresOptions = this.props.features;
featuresOptions.map(fo => {
fo.isFeatureSelected = false;
});

this.setState({
featuresOptions: featuresOptions
});
}

selectFeatures(value) {
if (value != "") {
this.setState({
selectFeature: value
});
featuresOptions.forEach(e => {
var reqIndex = value.indexOf(e);
if (reqIndex >= 0) {
value[reqIndex].isFeatureSelected = true;
} else {
var notReqIndex = this.state.featuresOptions.indexOf(e);
this.state.featuresOptions[notReqIndex].isFeatureSelected = false;
}
});
} else {
this.state.featuresOptions.map(val => {
val.isFeatureSelected = false;
});
this.setState({
selectFeature: ""
});
}
}

featuresCheckbox(options, id) {
return (
<span>
<input
checked={this.state.featuresOptions[id].isFeatureSelected}
type="checkbox"
onChange={this.selectFeatures.bind(this)}
/>
<span> {this.state.featuresOptions[id].name} </span>
</span>
);
}

<Select
multi={true}
removeSelected={false}
className="create-component-select multi-select"
placeholder="Features"
cache={false}
noResultsText="No Features Found"
value={this.state.selectFeature}
onChange={this.selectFeatures.bind(this)}
labelKey="name"
autosize={true}
valueKey="id"
backspaceToRemoveMessage="remove"
name="selectFeatures"
joinValues={true}
options={this.state.featuresOptions}
optionRenderer={this.featuresCheckbox.bind(this)}
/>

Any suggestions will be appreciated.

[rpiaggio]

May I suggest that this functionality (showing checkboxes for options) be built into the control?

Now that option groups are supported in v2 it would be really cool to be able to select/remove whole groups with a checkbox on the group name.

[kalyanj92]

I had a similar Issue with Drop down checkboxes.
We have the fields of checkbox getting disappeared after the selection has been made.

I have created a component that wraps the checkbox input tags inside the Drop down tag.

[Sawan1994]

Hi @alexeikaratai ,

You can do this by using components featire of react-select.

i am sharing a snippet of the code done by me for same.

const Option = props => { return ( <div> <components.Option {...props}> <input type="checkbox" checked={props.isSelected} onChange={() => null} /> <label>{props.value}</label> </components.Option> </div> ); };

<Select components={{ Option }} isMulti closeMenuOnSelect={false} hideSelectedOptions={false} options={options} />

[KillerAyce]

Implemented @Sawan1994 code a little with grouping
https://codesandbox.io/s/o567zv6j2q

[lokers]

Another improved version this time without create-react-class as per new React requirements if you use ES6. Also with callback function for onChange, and added PropTypes.

https://codesandbox.io/s/k5m42wq71v

[rtskmr]

I am also getting this issue. I need to give checkbox for every item list including Select All in the select. Please help on this.

[a2441918]

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

Try this out

[LillaEli]

I have been working on a solution for this issue for a while now and I completed my initial solution https://codesandbox.io/embed/upbeat-sun-0q3o4 by adding a custom ValueContainer component to be able to only show a message, e.g. "All is selected" when select all is checked! Here is the result:

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

[SanjaySankar]

I have been working on a solution for this issue for a while now and I completed my initial solution https://codesandbox.io/embed/upbeat-sun-0q3o4 by adding a custom ValueContainer component to be able to only show a message, e.g. "All is selected" when select all is checked! Here is the result:

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

This helped a lot! Thank you so much!

[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!

[itispal]

Hey @LillaEli - comment #502719989
While deselecting an item it deselects rest of the selected items too!! Sharing the fixed one

import React from "react"
import { default as ReactSelect } from "react-select"

const Select = props => {
  if (props.allowSelectAll) {
    return (
      <ReactSelect
        {...props}
        options={[props.allOption, ...props.options]}
        onChange={(selected, event) => {
          if (selected !== null && selected.length > 0) {
            let result = []
            if (event.action === "select-option") {
              if (selected[selected.length - 1].value === props.allOption.value || selected.length === props.options.length) {
                return props.onChange([props.allOption, ...props.options])
              }
              return props.onChange(selected)
            }else if(event.action === "deselect-option" && event.option.value !== 'All'){
              result = selected.filter(
                option => option.value !== props.allOption.value
              )
            }
            return props.onChange(result)
          }
          return props.onChange(selected)
        }}
      />
    )
  }

  return <ReactSelect {...props} />
}

Select.defaultProps = {
  allOption: {
    label: "Select all",
    value: "All"
  }
}

export default Select

[dat212]

Hi @LillaEli, Do you have any solution if i want to create tree select checkbox ? thank you !!!

[jayacados]

Hi @LillaEli and others, is there any way to ensure that after I load API data, some items are check marked? I've been tinkering with it but haven't found a solution

[SanjaySankar]

@jayacados I don't know if I completely understand your asking, but after loading the API data, just pass the required data items that you want to get check marked into the value prop. That will keep it check marked on initial load.