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. ?

[GabrielfLuchtenberg]

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.

[GabrielfLuchtenberg]

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

[arunmmanoharan]

@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

[thoughtworks-tcaceres]

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. 🙏

[manjeet-roy]

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

@mihhail-lapushkin Do you have any csb example to hook the selected values with react-form controller and having reset also. I am finding it difficult to hook the selected values with the react form. Does anyone have the working solution for this.

[srinivasmerugu]

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

both samples have select all with checkbox

@vigneshwaran-chandrasekaran Hi .. I have exact requirement as mentioned in your sandbox but only thing is when we chose select all option it is coming as part of values. If we don't push the default selectallOption then select all checkbox is not working . Please let me know if we have can have the selected values with out defalut allOption on valuecontainer on clicking select all checkbox.

[alvinlys]

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

I looked in your CSD and I noticed there some weird auto focus to the first option whenever i clicked other options despite not moving the cursor. Would you mind to try it on your browser?

[alvinlys]

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

I looked in your CSD and I noticed there some weird auto focus to the first option whenever i clicked other options despite not moving the cursor. Would you mind to try it on your browser?

I able to solve this issue by wrapping useMemo / useRef on options,
const getOptions = useMemo(() => [selectAllOption, ...props.options], []);

[kalaiy]

Finaly working !!! , typescript https://github.com/kalaiy/react-select-all demo https://stackblitz.com/edit/stackblitz-starters-erapo7?file=src%2FApp.tsx