Feature Request : Option to select "All" in multi select dropdown

[samikroy]

Currently Multiselect dropdown component allows to select multiple choices. Is there a possibility to have an option as "All". Upon check and uncheck by the users, all other options will be checked and unchecked respectively. In case of unchecking any option "All" should get unchecked as well.
Can this be a new property to the dropdown component.

[betrue-final-final]

This isn't usually a feature seen in these as the more common case is just selecting a couple, and this would add a whole new row. We'll take it under advisement and get back to you.

[jayeshvg]

Sounds like a required feature. Usually in multi select we would need Select "All" option which can work smartly depending on the selection. Any considerations?

[stale]

This issue has been automatically marked as stale because it has not activity for 30 days. It will be closed if no further activity occurs within 14 days of this comment. Thank you for your contributions to Fabric React!
Why am I receiving this notification?

[oengusmacinog-zz]

feature request stay alive

[oengusmacinog-zz]

@samikroy @jayongg Just an update that this is not currently on our roadmap. However, we would be happy to review a PR for this change if you'd like to submit one.

[micahgodbolt]

this could probably be easily solved with a custom button at the top of the dropdown. Seems Dropdown doesn't support onRenders yet though. Hopefully with the conversion to slots in the future we can make sure to support that. Wouldn't want to add an onRender just to deprecate it when slots hit.

[micahgodbolt]

blocked waiting for slots work.

[qazizaahirah]

Any plans for implementing this feature?

[micahgodbolt]

no plans right now. we're considering a major overhaul for dropdown/combobox and would certainly consider this feature then

[xugao]

@chsach2050 reported same request in #11640. we should make sure this feature request gets attention . FYI @khmakoto

[agg23]

Pushing for attention once again. It's not incredibly difficult to add "select all" yourself, but the lack of indeterminate support is problematic.

[vorobievik]

Pushing for attention once again. It's not incredibly difficult to add "select all" yourself, but the lack of indeterminate support is problematic.

please tell me how can I do it myself

[rwormsbecher]

@vorobievik

I created a select all version the other day, even though the code could be written cleaner I will provide the onChange method. From there you should be able to find out what's going on, if not let me know, I will help you to clarify it.

 const _onChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
        if (item) {

            // if the option all sites is selected, update the uniqueSiteOptions to contain all sites but alloptions
            if (item.key === 'all options') {
                const allOptionsIsChecked = sitesSubset.indexOf('all options') > -1 ? false : true;

                if (allOptionsIsChecked) {
                    const allSitesExceptAllOptions = uniqueSiteOptions.map(site => {
                        return site.text
                    })
                    setSitesSubset(allSitesExceptAllOptions);
                } else {
                    setSitesSubset([] as string[])
                }


            } else {
                // create a new object to get rid of the reference.
                let tempData: any = [...sitesSubset];
                if (sitesSubset.indexOf(item.text) === -1) {

                    tempData.push(item.key);

                    // if all options are selected, check the all options checkbox.
                    if (uniqueSiteOptions.length - (sitesSubset.length + 1) === 1) {
                        tempData.push("all options");
                    }

                    setSitesSubset(tempData);
                } else {
                    // if not all options are selected, uncheck the all options checkbox
                    if (uniqueSiteOptions.length - (sitesSubset.length) == 0) {
                        tempData = tempData.filter(item => item !== 'all options');
                    }
                    setSitesSubset(tempData.filter(entry => item.text !== entry));
                }
            }
        }
    };

The most important part is the main else block. Here we will check whether the length of the options checked is equal to the total number of options, plus or minus one depending is the "all options" checkbox is selected.

[jeffersoneagley]

I'm also currently having to implement both this and dropdown searching for a web portal that needs the "select all" in basically all of my filter sets.

[saloni268]

Hi, are there any updates on this feature? @Jahnp @micahgodbolt @xugao

As mentioned in above comments, implementing 'Select All' functionality can be done, but we need to show indeterminate state in the 'Select All' checkbox, when all options are not selected.

Any approach to achieve this in UI?

[Satyarthsr]

Hi, any updates if or when will this feature be added? @Jahnp @micahgodbolt @xugao .

[skoofy5]

Still no movement on this?

[jeffersoneagley]

Yea I'm still using an overloaded button+contextualmenu to achieve basically the same dropdown that's in fluent's northstar designs.

[JustSlone]

@smhigley can you share here the workaround we have for adding select all to a multi-select dropdown.

In terms of building this into the component. This will have to wait until we converge/refactor dropdown/combobox as part of the Fluent UI vNext effort.

[nelsonwhyu]

Hi, hope and seems having "Select All" option in dropdown/combobox multiSelect is the consensus. My firm is adopting fluent ui for software development and it's common than not that our dropdown will contain at least 20+ options and Select All becomes critical for user experience.

Seeing you have plan to overhaul dropdown/combobox, here are some features in my wish-list:

1. Option to Select All
2. Option to Select Group similar to GroupList, within a dropdown box.
3. Option to filter dropdown menu based on freeform text input, that will be useful if my user need to find that particular option out of a list of 100.

Thanks!

[scwood]

For those wanting an example implementation of a custom "Select all" option, here's a small snippet:

import { Dropdown, IDropdownOption } from '@fluentui/react';
import React, { useState } from 'react';

const options: IDropdownOption[] = [
  { key: 'all', text: 'All' },
  { key: 'orange', text: 'Orange' },
  { key: 'apple', text: 'Apple' },
  { key: 'banana', text: 'Banana' }
];

const DropdownSelectAllExample: React.FunctionComponent = () => {
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);

  function handleChange(event: React.FormEvent<HTMLDivElement>, option: IDropdownOption | undefined) {
    if (option === undefined) {
      return;
    }
    if (option.key === 'all' && option.selected) {
      setSelectedKeys(options.map((option) => option.key as string));
    } else if (option.key === 'all') {
      setSelectedKeys([]);
    } else if (option.selected) {
      const newKeys = [option.key as string];
      if (selectedKeys.length === options.length - 2) {
        newKeys.push('all');
      }
      setSelectedKeys([...selectedKeys, ...newKeys]);
    } else {
      setSelectedKeys(selectedKeys.filter((key) => key !== option.key && key !== 'all'));
    }
  }

  return (
    <Dropdown
      multiSelect
      selectedKeys={selectedKeys}
      onChange={handleChange}
      options={options}
      label="Fruits"
      placeholder="Select fruits"
    />
  );
};

If you use this, you'll most likely want to implement onTitleRender, since the value of the dropdown will be "All, Orange, Apple, Banana" when "All" is selected, but I'll leave that up to the reader.

[msft-fluent-ui-bot]

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.