How do we implement select all functionality?

[rsathishtechit]

I am looking for a select all functionality in multi select. Is there any example of the same?

[csandman]

This is pretty straightforward, as long as you have your selected options controlled in state.

If your options object is flat (no grouped headings) it's as simple as setting your value state to the initial list of options.

import React, { useState } from "react";
import { Button, Container } from "@chakra-ui/react";
import { Select, OptionBase, GroupBase } from "chakra-react-select";
import { colorOptions } from "./data/data";

interface ColorOption extends OptionBase {
  label: string;
  value: string;
}

const App: React.FC = () => {
  const [selectedColors, setSelectedColors] = useState<readonly ColorOption[]>(
    []
  );

  const selectAllOptions = () => {
    setSelectedColors(colorOptions);
  };

  return (
    <Container mb={16}>
      <Select<ColorOption, true, GroupBase<ColorOption>>
        isMulti
        name="colors"
        options={colorOptions}
        placeholder="Select some colors..."
        value={selectedColors}
        onChange={setSelectedColors}
      />

      <Button onClick={selectAllOptions} colorScheme="blue">
        Select All
      </Button>
    </Container>
  );
};

export default App;

If you want a way to do this without knowing whether you have grouped options or not, you'll need to use a function which flattens the list of options before setting them on state. Something like this should work.

import React, { useState } from "react";
import { Button, Container } from "@chakra-ui/react";
import {
  Select,
  OptionBase,
  GroupBase,
  OptionsOrGroups,
} from "chakra-react-select";
import { colorOptions } from "./data/data";

interface ColorOption extends OptionBase {
  label: string;
  value: string;
}

const App: React.FC = () => {
  const [selectedColors, setSelectedColors] = useState<readonly ColorOption[]>(
    []
  );

  const getFlatOptions = (
    options: OptionsOrGroups<ColorOption, GroupBase<ColorOption>>
  ): ColorOption[] => {
    if (!options?.length) {
      return [];
    }

    return options.reduce<ColorOption[]>((opts, optOrGroup) => {
      if ("value" in optOrGroup) {
        return [...opts, optOrGroup];
      }

      if ("options" in optOrGroup) {
        return [...opts, ...optOrGroup.options];
      }

      return opts;
    }, []);
  };

  const selectAllOptions = () => {
    setSelectedColors(getFlatOptions(colorOptions));
  };

  return (
    <Container mb={16}>
      <Select<ColorOption, true, GroupBase<ColorOption>>
        isMulti
        name="colors"
        options={colorOptions}
        placeholder="Select some colors..."
        value={selectedColors}
        onChange={setSelectedColors}
      />

      <Button onClick={selectAllOptions} colorScheme="blue">
        Select All
      </Button>
    </Container>
  );
};

export default App;

Here's a CodeSandbox: https://codesandbox.io/s/chakra-react-select-select-all-iki5ue?file=/app.tsx

If you want a JS example instead of TS let me know.