[Autocomplete] Option to select all options if multiple selections enabled

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I tried to search from issues whether this would’ve been discussed already, but wasn’t able to found one, so here goes:

Would it make sense to provide a prop for Autocomplete component to display a fixed “Select all” option in the options drop-down, if multiple is set for the component?

Examples 🌈

CodeSandbox demo, with ListBox customization: https://codesandbox.io/s/thirsty-moon-9egd9

Motivation 🔦

The requirement I’d need to fulfill, is that every selectable option should be easily selected “via one click”, and, the ability to do so should exist in close vicinity of the Autocomplete component (= in the options ListBox)

Currently, this needs customization from the developer, and seems that there are many ways to achieve the wanted behavior. But gut feeling is, that each customization is prone to contain some amount of smelling hacks (might also be, that I’ve missed some key factors upon implementations).

Some technical requirements, I came up with for the “select all” enabled Autocomplete:

• separate the “select all” from other actual “options” (for me it seems clearer to have that distinction)
• use the Autocomplete component, instead of useAutocomplete hook, as the Autocomplete component provides 90% of other functionalities out of the box (which is more than enough for me)
• display “select all” always on top, outside of the scrolling content

I’ve experimented this, by providing a customized ListBox for the Autocomplete component, that always renders some “select all” component on top, and props.children after that.

This mostly works, but the “select all” cannot be focused via keyboard navigation, as it’s missing the tabindex and the data-option-index attributes --> data-option-index is dynamically generated, and I wouldn’t want to “regenerate” them. Why I’d need to regenerate them? Because I’d like to have the “select all” option not to be included in the options, and the attributes are generated for the options.

[vileppanen]

I revamped the demo in the initial issue description a bit to inhabit the usage of filterOptions (it lacks the “always on top floating” styling). Here’s how I’ve setup the Autocomplete.

The filterOptions prop expects a function that takes (options, params) arguments --> the values need to be filtered by calling a function created by createFilterOptions before returning, like this:

const filter = createFilterOptions();
const filterOptions = (options, params) => {
   const filtered = filter(options, params);
   return [{ label: 'Select all', value: "Select all" }, ...filtered];
}

For the question how to control the “select-all” checkbox state, I just check it separately in the optionRenderer using the allSelected state variable, which is set in every render by comparing the selected values count agains available options count:

const optionRenderer = (option, { selected }) => {
    const selectAllProps =
      option.value === "select-all" // To control the state of 'select-all' checkbox
        ? { checked: allSelected }
        : {};
    return (
      <>
        <Checkbox
          color="primary"
          icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
          checkedIcon={<CheckBoxIcon fontSize="small" />}
          style={{ marginRight: 8 }}
          checked={selected}
          {...selectAllProps}
        />
        {getOptionLabel(option)}
      </>
    );
  };

I remember bumping few times to the same warning you describe, but in my case it was suppressed via getOptionSelected setup, similar as yours. Hard to say what could cause it without seeing the full setup 🤷

[WilliamZimmermann]

I could improve the Select All option getting off the “Select All” checkbox from the options list and putting it on the PopperComponent option. It’s more clean. However, I got some problems and I would like a help to solve it and have a full functional component:

1. When I scroll down and select (let’s say) the last option on the list, the scroll up to the top;
2. Let’s suppose we “Select All”. All works fine. We click outside the component to close the list. We click again to open the list. If now I try to to “Select All”, the component interprets that I’m clicking out of the component and closes it…

Could anyone help me with it?

CODE SANDBOX LINK: https://codesandbox.io/s/checkboxestags-material-demo-forked-5b0pt