React-select: Select All Option

[BharahthyKannan]

Hi
Sorry for asking the question here, but would like to know is there is a select all option in the package. I couldn't find any reference anywhere specifically. Could someone give some pointers. ?

[GLuchtenberg]

Hello @BharahthyKannan

Did you find a way to do a select all? I'm after this too

[BharahthyKannan]

@GLuchtenberg
I follwed this link and created a wrapper component
https://medium.com/@alex_escalante/react-select-alloptionoptions-with-a-single-click-1ebf5a33fe31

Let me know if you need an working example.

[GLuchtenberg]

Thank you!
I think I solved in a similar way with a wrapper component too.

I created an input value with a meta inside and set the value with all input values.

const selectAllOption = { value: possibleOptions.map(option => option.value), label: "All values selected", meta: { selectAll: true } };

added the option to component options (when all options are selected, I show nothing)
options = areAllOptionsSelected ? [] : [selectAllOption, ...possibleOptions];

then in my value I've
value={areAllOptionsSelected ? [selectAllOption] : input.value}
to show the user "All values selected"

where input.value are the options selected

[a2441918]

@BharahthyKannan @GLuchtenberg I rendered mult-select with checkbox. Anyway to trigger a checked for selectAll?

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

[fabianTMC]

Simple solution with a select all button (and some bootstrap)

import React from "react";
import ReactSelect from 'react-select';

// Specify props.allowSelectAll = true
const Select = props => {
    if (props.allowSelectAll) {
        return (
            <div className="input-group">
                <ReactSelect {...props} />
                <span className="input-group-append">
                    <button type="button" onClick={() => props.onChange(props.options)} className="btn btn-primary">Select All</button>
                </span>
            </div>
        );
    }

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

export default Select;

[goxr3plus]

There is is this example but i don't understand how to call it correctly .... https://medium.com/@alex_escalante/react-select-alloptionoptions-with-a-single-click-1ebf5a33fe31

[vigneshwaran-chandrasekaran]

Simple solution with a select all button (and some bootstrap)

import React from "react";
import ReactSelect from 'react-select';

// Specify props.allowSelectAll = true
const Select = props => {
    if (props.allowSelectAll) {
        return (
            <div class="input-group">
                <ReactSelect {...props} />
                <span class="input-group-append">
                    <button type="button" onClick={() => props.onChange(props.options)} className="btn btn-primary">Select All</button>
                </span>
            </div>
        );
    }

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

export default Select;

hi please change class to className

[vigneshwaran-chandrasekaran]

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

both samples have select all with checkbox

[goxr3plus]

@vigneshwaran-chandrasekaran You are amazing bro literally :) !!!

[abhinav2331]

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

both samples have select all with checkbox

Hi nice work. But I have a query if I need multiple select boxes on same page, then if we select values, it also selected value in other as well. I put the name to every select but it not work.
Please have a look on it https://codesandbox.io/s/strange-khorana-3zimd

[goxr3plus]

@abhinav2331 Well i am having also multiple select boxes and no problem as far as you configure correctly the reducer .

import React from 'react'
import PropTypes from 'prop-types'
import { default as ReactSelect } from 'react-select'
import { components } from 'react-select'
import makeAnimated from 'react-select/animated'

const animatedComponents = makeAnimated()

const Option = props => {
  return (
    <div>
      <components.Option {...props}>
        <div className="pretty p-default">
          <input type="checkbox" checked={props.isSelected} onChange={() => null} />
          <div className="state p-success">
            <label>{_.startCase(props.label)}</label>
          </div>
        </div>
      </components.Option>
    </div>
  )
}

const MultiValue = props => (
  <components.MultiValue {...props}>
    <span>{props.data.label}</span>
  </components.MultiValue>
)

const ExtendedMultiSelect = props => {
  if (props.allowSelectAll) {
    return (
      <ReactSelect
        {...props}
        components={{ Option, MultiValue, animatedComponents, ...props.components }}
        options={[props.allOption, ...props.options]}
        onChange={(selected, event) => {
          if (selected !== null && selected.length > 0) {
            if (selected[selected.length - 1].value === props.allOption.value) {
              return props.onChange([props.allOption, ...props.options])
            }
            let result = []
            if (selected.length === props.options.length) {
              if (selected.includes(props.allOption)) {
                result = selected.filter(option => option.value !== props.allOption.value)
              } else if (event.action === 'select-option') {
                result = [props.allOption, ...props.options]
              }
              return props.onChange(result)
            }
          }

          return props.onChange(selected)
        }}
      />
    )
  }

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

ExtendedMultiSelect.propTypes = {
  options: PropTypes.array,
  value: PropTypes.any,
  onChange: PropTypes.func,
  allowSelectAll: PropTypes.bool,
  allOption: PropTypes.shape({
    label: PropTypes.string,
    value: PropTypes.string,
  }),
}

ExtendedMultiSelect.defaultProps = {
  allOption: {
    label: 'Select all',
    value: '*',
  },
}

export default ExtendedMultiSelect

import React, { Component } from 'react'
import ExtendedMultiSelect from './ExtendedMultiSelect'

export default class MultiSelectExample extends Component {
  constructor(props) {
    super(props)

    this.state = {}
  }

  onChange = e => {
    console.log('New value : ', e.target.value)
  }

  render() {
    //Check https://react-select.com/home on how to configure options
    const options = [
      { value: '101010', label: '101010' },
      { value: '101090', label: '101090' },
      { value: 'aaaaa', label: 'aaaa' },
    ]

    return (
      // Control Group is optional
      <ControlGroup label={label} tooltip={'Pick ' + label} mandatory={true} style={{ padding: 0 }}>
        <ExtendedMultiSelect
          key={'key'}
          options={options} //Check https://react-select.com/home
          isMulti
          closeMenuOnSelect={false}
          hideSelectedOptions={false}
          onChange={this.onChange}
          allowSelectAll={true}
          value={value}
        ></ExtendedMultiSelect>
      </ControlGroup>
    )
  }
}

[abhinav2331]

@abhinav2331 Well i am having also multiple select boxes and no problem as far as you configure correctly the reducer .

import React from 'react'
import PropTypes from 'prop-types'
import { default as ReactSelect } from 'react-select'
import { components } from 'react-select'
import makeAnimated from 'react-select/animated'

const animatedComponents = makeAnimated()

const Option = props => {
  return (
    <div>
      <components.Option {...props}>
        <div className="pretty p-default">
          <input type="checkbox" checked={props.isSelected} onChange={() => null} />
          <div className="state p-success">
            <label>{_.startCase(props.label)}</label>
          </div>
        </div>
      </components.Option>
    </div>
  )
}

const MultiValue = props => (
  <components.MultiValue {...props}>
    <span>{props.data.label}</span>
  </components.MultiValue>
)

const ExtendedMultiSelect = props => {
  if (props.allowSelectAll) {
    return (
      <ReactSelect
        {...props}
        components={{ Option, MultiValue, animatedComponents, ...props.components }}
        options={[props.allOption, ...props.options]}
        onChange={(selected, event) => {
          if (selected !== null && selected.length > 0) {
            if (selected[selected.length - 1].value === props.allOption.value) {
              return props.onChange([props.allOption, ...props.options])
            }
            let result = []
            if (selected.length === props.options.length) {
              if (selected.includes(props.allOption)) {
                result = selected.filter(option => option.value !== props.allOption.value)
              } else if (event.action === 'select-option') {
                result = [props.allOption, ...props.options]
              }
              return props.onChange(result)
            }
          }

          return props.onChange(selected)
        }}
      />
    )
  }

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

ExtendedMultiSelect.propTypes = {
  options: PropTypes.array,
  value: PropTypes.any,
  onChange: PropTypes.func,
  allowSelectAll: PropTypes.bool,
  allOption: PropTypes.shape({
    label: PropTypes.string,
    value: PropTypes.string,
  }),
}

ExtendedMultiSelect.defaultProps = {
  allOption: {
    label: 'Select all',
    value: '*',
  },
}

export default ExtendedMultiSelect

import React, { Component } from 'react'
import ExtendedMultiSelect from './ExtendedMultiSelect'

export default class MultiSelectExample extends Component {
  constructor(props) {
    super(props)

    this.state = {}
  }

  onChange = e => {
    console.log('New value : ', e.target.value)
  }

  render() {
    //Check https://react-select.com/home on how to configure options
    const options = [
      { value: '101010', label: '101010' },
      { value: '101090', label: '101090' },
      { value: 'aaaaa', label: 'aaaa' },
    ]

    return (
      // Control Group is optional
      <ControlGroup label={label} tooltip={'Pick ' + label} mandatory={true} style={{ padding: 0 }}>
        <ExtendedMultiSelect
          key={'key'}
          options={options} //Check https://react-select.com/home
          isMulti
          closeMenuOnSelect={false}
          hideSelectedOptions={false}
          onChange={this.onChange}
          allowSelectAll={true}
          value={value}
        ></ExtendedMultiSelect>
      </ControlGroup>
    )
  }
}

Thanks for your quick response. I have another question.

How can I select the only filter item through select all. Suppose I have 100 item, I write a search then there remain 20 items, so is this possible select all 20 item by click select all. If you have any solution please share with me.
Thanks.

[goxr3plus]

@abhinav2331 Hm , what i would do is , instead of giving the user all the data on the select all , i will give only the 20 items , after all that are the possible filtered items , you don't need to show them all :) .

Just pass as data to ExtendedMultiSelect the filtered 20 items .

[mihhail-lapushkin]

My solution for Select All:
https://stackoverflow.com/a/61250357

[tylercaceres]

Is there a way to select all for 'groups' as well?

[bladey]

Also requested in issue #3668

[ebonow]

@tylercaceres
Select all options (including group header) by clicking group header.
https://codesandbox.io/s/react-select-selected-group-header-vmigz?file=/src/App.js

[ebonow]

I'll be closing this issue as it appears the community has created many different solutions for this.

Thank you everyone for your contributions. 🙏