MultiSelect: Select All option ☂️

[tahaimt]

Summary

There is an option to remove all the selected items from the multi select list, however if a user selected all the items and then clicked on remove all by mistake (for instance, if there is a narrow dropdown showing a list of 2 digit codes or something similar its not hard to press the remove all button by mistake), there is no way to select all with one click other than by clicking on individual items. In our case, we have drop downs with about a thousand items.

Justification

Business reason is that if there is an option to remove all selections, there should be an option to select all to undo if you remove all selections by mistake.

Desired UX and success metrics

A sample can be seen on the mdbootstrap multiselect page.

"Must have" functionality

There should be a way to select all the items in multiselect list with one click

### Tasks
- [ ] https://github.com/carbon-design-system/carbon/issues/13611
- [ ] https://github.com/carbon-design-system/carbon/issues/13612
- [ ] https://github.com/carbon-design-system/carbon/issues/13434
- [ ] https://github.com/carbon-design-system/carbon-website/issues/3977
- [ ] https://github.com/carbon-design-system/carbon-website/issues/3973
- [ ] https://github.com/carbon-design-system/carbon-website/issues/3974
- [ ] https://github.com/carbon-design-system/carbon-design-kit/issues/789
- [ ] https://github.com/carbon-design-system/carbon/issues/16117

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[tahaimt]

Wow, it hasnt even been looked at and its about to be closed.

[tahaimt]

@dakahn can you please take a look at this?

[ganisback]

need this feature

[dakahn]

Apologies for the lack of action on this issue. We've started porting enhancement requests over to our Github Discussions board where they can get maintainer responses and community interaction more reliably.

I've done that for this issue and you can find that discussion here. Feel free to upvote and discuss (or suggest edits if your original proposal has changed/evolved) Misunderstood our (currently evolving) process.

This is triaged as an open proposal and should be seen in our next proposals meeting

thanks for your patience

[tanoargie]

Also need this feature. Seems to be repeated in carbon-design-system/carbon#7705

[jnm2377]

Related discussion: https://github.com/carbon-design-system/carbon/discussions/7622

[jnm2377]

Design has approved this feature enhancement as an optional prop. Need design specs first.

[sstrubberg]

@ganisback & @tahaimt what product or PAL are you supporting? (Or were you supporting, considering the age of this request). Apologies for the lack of response.

[sstrubberg]

from Slack:

There's not a built-in way AFAIK. And worse, the undocumented selectedItems prop doesn't seem to behave as desired/expected (it doesn't seem to reflect state changes to the array you give it). So the way I do it is with a button below or above MultiSelect. The trickiest part with this is being stuck with using initialSelectedItems, which is only evaluated once when it's first constructed. So I use the DOM removal/add-back trick to get it to re-evaluate the initialSelectedItems prop after I've changed it with Button code.

{this.state.multiSelectOn &&
<FilterableMultiSelect
         initialSelectedItems={this.state.selectedBookIdArray}
         onChange={this.onBookSelectChange}
         ...etc... />
}
<Button size="sm" onClick={this.selectAllBooks}>Select All</Button>
And then the click handlers look like this:
selectAllBooks = () => {
        this.setState({ selectedBookIdArray: this.bookIdArray, multiSelectOn: false },
            () => this.onBookSelectChange({ selectedItems: this.state.selectedBookIdArray }));
    }
onBookSelectChange = (newState: { selectedItems: any[] }) => {
        let newItems = newState.selectedItems;
        this.setState({ selectedBookIdArray: newItems, multiSelectOn: true });
    }

[jimmydyer]

@sstrubberg Are there any updates or designs related to the Select all use case for the multi-select dropdown?

Our product desperately needs this because our users have to manage lots of data sources, and if they clear the pill from the dropdown, they would need to select each option in the list individually tens to hundreds of times.

Here's a screenshot for reference:

What we need is something like the sketch below:

[tay1orjones]

@sstrubberg I'm adding the strategic adopter label because of the duplicate carbon-design-system/carbon#15599 which lists "IBM Sterling - B2Bi SaaS InFlight Web"

[jjennings7]

DataStage needs this feature as well. Looks like this is on the roadmap but I don't see any designs in 13434. Is there any update on the design or when it will be consumable? Thanks.

[sstrubberg]

~hey @jjennings7, this is still queued up to work on, but we're knee-deep in docs debt on the design side of the house. I'd like to start designs soon though. If you have an early designs or use-cases that ya'll have been working on, that might help us expedite things when we start working on it though. Let me know!~

Design exploration starting next sprint!

[benjamin-kurien]

Hey, We have now started working on this issue. Please vote here to help us clarify the problem you're facing.

@jjennings7 @jimmydyer @tanoargie @ganisback @tahaimt @dakahn @jnm2377