Fluentui: 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[bot]]

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]

feature request stay alive

[oengusmacinog]

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

[Github307]

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?