MultiSelect - ability to have more control over and clear selected items

[kabeaty]

Summary

I would like to request that the MultiSelect component be updated so that it's possible to have more control over the selection of items and clearing of already selected items, including clearing all selected items at once. Something similar was previously discussed in this issue that I found with a solution that I ended up using for now for my use case (#2623). Also in that issue, the implementation for this requested enhancement that was floated as possibly being the way to go was surfacing Downshift's action props to help with clearing selection/items/etc.

Justification

This came up in our project when we needed to be able to clear all selections in the MultiSelect component for our Watson Discovery React components from one button that also clears all selections across other components, which use Carbon's Checkbox. You can see the related pull request here, which has more detail, if it helps: watson-developer-cloud/discovery-components#11

Desired UX and success metrics

The desired UX is that a developer who uses the MultiSelect React component is able to control the component's selections, both selecting and deselecting, from a button or other component instead of one at a time by the user. We can measure the success for the developer if it's possible to do this with props, and there is no longer any need to reference the DOM, as in the solution included in the previous issue above ^.

"Must have" functionality

Ability to clear all selected items at once is the "must have" functionality for this request.

Specific timeline issues / requests

No, but I wanted to surface this since it's a question that was asked in the past for a similar use case to get it back on the team's radar.

Available extra resources

I am a front-end developer who would be able/willing to help with implementing these changes. I wanted to first open this feature request and get feedback from the Carbon team though before proceeding. Please let me know any additional details/info I can provide, thank you!

[abbeyhrt]

Hi @kabeaty! 👋 Thanks for making this enhancement request! On our side, we would love to support this work if you would like to contribute it! We do give users the ability to forward downShift props to the MultiSelect and we have a PR in the works to upgrade our Downshift dependency to its latest version which might provide more functionality for what you're trying to do!

[tw15egan]

Here's an example on sandbox:
https://codesandbox.io/s/modest-merkle-fzltr

[caritaou]

We are seeing the same problem, scenario is documented here: elyra-ai/canvas#510

We are using a checkbox to modify the values of the items that are passed to the Multiselect. In doing so, if there were any previous initialSelectedItems, we are trying to clear that. But as mentioned in this issue, we are not able to do so.

I was able to make slight progress by modifying the state directly, but that doesn't work anymore as soon as the user select another option. We are not able to reset the selected options after a user makes a selection.

From the above image, we can see that there are no selected options passed into the Multiselect control, but there are still items shown as selected:

[sali2801]

any update on this please? I am still not able to reset the multiselect programmatically

[galilmori]

What is the ETA for this? we need this to programmatically control this. The "key" workaround has limits.

[dhebert-dev]

I am also running into an issue with programmatically selecting an existing item when the user attempts to import information into a form which contains this component.

[gipscoh]

Hi
I have the same problem.

I can't control value in multi-select (select All value, set current values, reset value).

THIS PROBLEM SINCE THE 2019 YEAR. AND the Carbon team didn't do anything.

I don't want to wait and I made a component based on React-multi-select-component with styles carbon.

(temporary solution)
Now I use my custom component:
https://codesandbox.io/s/react-multi-select-component-example-forked-o594c?file=/src/index.js

PS CARBON TEAM - Please stop the closed topics without solving the problem.

[joshblack]

Hey there @gipscoh, please try and keep the conversation productive and respectful. I definitely understand being frustrated when components that we offer don't support an important use case for your work. I am so sorry when people run into that with the project, it's never our intention and we try our best to prioritize and fix as much as we can. Unfortunately, that means that some things won't be addressed if other items are prioritized 😞

I'm not sure what your intent was with your message but what you shared in all caps or the bolded text can come across in a way that's hurtful or unproductive to contributors on this project. I hope the background and context that I provided are helpful and ask that you keep that in mind in the future.

On our end, we're always trying to take on more issues and address problems that people have with the project. We're also always open for teams to submit their own Pull Requests to add missing functionality or address fixes, as well. I hope you understand.

I also wanted to say thanks to everyone on this thread for sharing details about this problem and apologize for how long this has been an issue. Just to reiterate, we're always happy to work with teams and accept contributions for things like this if people have the time. On our end, we'll also try to prioritize as appropriate. Something that can help out a ton on our end is to "thumbs up" the issue using a reaction. We have a good number fo this issue already and I just wanted to say thanks to those who added that reaction 🙏 We can then see the issues that have the most "thumbs up" reactions to know which ones are important to the community 👍

[gipscoh]

Hi I am working on an IBM project.  IBM is currently actively converting its projects to the Carbon Design system.  I find that in this situation, the multiple choice component is useless without programmatic control.  Just add the "selectedItem" input parameter.  Like on your other components like the dropdown Wednesday, 20 October 2021, 22:38 +0200 from ***@***.*** ***@***.***>:

…

Hey there @gipscoh , please try and keep the conversation productive. I definitely understand being frustrated when components that we offer don't support an important use case for your work. I am so sorry when people run into that with the project, it's never our intention and we try our best to prioritize and fix as much as we can. Unfortunately, that means that some things won't be addressed if other items are prioritized 😞 I'm not sure what your intent was with your message but what you shared in all caps or the bolded text can come across in a way that's hurtful or unproductive to contributors on this project. I hope the background and context that I provided are helpful and ask that you keep that in mind in the future. On our end, we're always trying to take on more issues and address problems that people have with the project. We're also always open for teams to submit their own Pull Requests to add missing functionality or address fixes, as well. I hope you understand. I also wanted to say thanks to everyone on this thread for sharing details about this problem and apologize for how long this has been an issue. Just to reiterate, we're always happy to work with teams and accept contributions for things like this if people have the time. On our end, we'll also try to prioritize as appropriate. Something that can help out a ton on our end is to "thumbs up" the issue using a reaction. We have a good number fo this issue already and I just wanted to say thanks to those who added that reaction 🙏 We can then see the issues that have the most "thumbs up" reactions to know which ones are important to the community 👍 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub , or unsubscribe . Triage notifications on the go with GitHub Mobile for iOS or Android .

[gipscoh]

Hi everyone
I found the solution how to set the new value to Multiselect based on initialSelectedValue props:

https://codesandbox.io/s/carbon-design-programmly-setting-value-mfoy6

[galilmori]

Hi everyone I found the solution how to set the new value to Multiselect based on initialSelectedValue props:

https://codesandbox.io/s/carbon-design-programmly-setting-value-mfoy6

The thing is that everytime you are updayting the value (this is the proposed workaround from carbon team) you also update your key which rerenders the component. The problem with that when you want to dynamically update your list according to what you choose the component will rerender and the selection overflow menu will close. Also this is a suboptimal way to use react. A component should not rerendered everytime you click on something!

[dezkareid]

I have the same issue, to solve this one I change the useSelection hook to include a value property this one is used like a flag to know if component is controlled or uncontrolled by the user.

Apparently is working fine, I would like to be assigned to this issue, you can check the code of my approach on this PR

[arloduff]

Can someone please clarify if this is working, or if it isn't? #10236 makes me think this should be working, but I have the latest carbon-components-react installed (8.16.0 according to the NPM registry) and the selected items are not being updated when I call setSelectedItems.