"Select All" prop

[fablexis91]

Is your feature request related to a problem? Please describe.

It would be nice to have the option of "Select All" for picking all the menu options. I know that we have available the prop renderMenu, but in order to see the "Select All" working as expected without replacing the use of MenuItem, that should be part of the options prop value, otherwise when clicking on it we will get an error like this:

Uncaught TypeError: Cannot read properties of undefined (reading 'paginationOption')

So, there's no way to use an option that does not belong to the options prop without being part of the entire data

Describe the solution you'd like
it would be nice to have a prop that receives a boolean value that can turn on this feature of selecting all of the menu items

Does your feature address a common use case? Does it provide a more generalized way to solve the type of problem you're encountering?

I think for a large amount of data (let's say 15 items, which actually is not that big), if the user wants to select all the records, by default they will have to pick each item... which is kinda tedious

[gnsoria]

Yes! Please add this!

Here's my use case: My typeahead contains dozens of options (usually between 40 and 100). Users can filter with a variety of keywords, but this often still leaves them with a dozen or more filtered options. Especially on mobile, it can be difficult to select everything, especially since their keyword is cleared after each selection. For example, they'd have to type "SP", select an option, type "SP", select an option, maybe a dozen times.

It also might be easier for my users to select all, and then deselect options they don't want using the tokens.

It would be great to be able to toggle on a menu item at the top of the menu that says "Select All" and then adds all filtered options to the selections.

[Nathan-Roberts123]

You mean something like this???

[Nathan-Roberts123]

I added this feature in my local source code, I need the project manager to assign me to the issue so I can make a contributions.

[gnsoria]

@ericgio Any chance you could work with @Nathan-Roberts123 to get their solution implemented?

[ericgio]

A bit of a workaround, but this functionality can currently be achieved using the pagination option:

Sandbox example: https://codesandbox.io/p/sandbox/admiring-sky-j94q6r

const SelectAllExample = () => {
  const typeaheadRef = useRef(null);
  const [selected, setSelected] = useState([]);

  const selectAllOption = {
    label: 'Select all',
    paginationOption: true,
  };

  return (
    <Typeahead
      clearButton
      id="select-all-example"
      multiple={true}
      onChange={setSelected}
      onPaginate={() => {
        typeaheadRef.current.clear();
        setSelected(options);
      }}
      options={options}
      placeholder="Choose a state..."
      ref={typeaheadRef}
      renderMenu={(
        results,
        {
          newSelectionPrefix,
          paginationText,
          renderMenuItemChildren,
          ...menuProps
        },
        state
      ) => {
        const items = results.slice();
        if (selected.length < options.length) {
          items.unshift(selectAllOption);
        }

        return (
          <Menu {...menuProps}>
            {items.map((result, idx) => (
              <MenuItem key={idx} option={result} position={idx}>
                <Highlighter search={state.text}>{result.label}</Highlighter>
              </MenuItem>
            ))}
          </Menu>
        );
      }}
      selected={selected}
    />
  );
};