[Feature Request]: In MultiSelect, show a read-only list of user's selections

[Yohanna]

The problem

In the MultiSelect component, we have a use case where we want to display the user's selections in a read-only mode. One use case is when the user is making selections through a multi-step Wizard, and we need to show a Summary page of the user's selections at the end of the Wizard.

Currently that's not possible natively as both the existing readOnly & disabled props disable the component entirely.

The solution

Change how the readOnly prop behaves by allowing the dropdown to be expanded, showing both the user's selections and other options in a disabled state. This allows the user to see what they've previously selected while providing a true read-only mode that doesn't let me make any modifications.

Alternatively, a third flag prop (beside readOnly & disabled) can be use to trigger this functionality, althouth I'd personally suggest implementing the functionality with the readOnly prop as it won't break existing functionality and it makes sense to use a readOnly prop for this feature.

Examples

No response

Application/PAL

QRadar Suite

Business priority

Medium Priority = upcoming release but is not pressing

Available extra resources

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[github-actions[bot]]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[tay1orjones]

To illustrate this, head to the storybook. Select a couple options in the list and then set readOnly to true in the controls pane. You get this:

As a user I have no way to know what's actually selected. It seems odd the user can't view the options by opening the dropdown. It's probably technically possible to allow the dropdown to open and forcing all options to be disabled while still showing the selected/checkbox checked for the ones selected. I'm not sure if there's any accessibility implications with that idea though.

[tay1orjones]

Related:

• https://github.com/carbon-design-system/carbon/issues/10345

[alina-jacob]

Discussed a possible solution for the read-only state problem:

[SOLUTION A] Replace the read-only tag component in Dropdown multi-select and filterable multi-select component with the operational-tag component for the read-only state version of the dropdown variants. This way users can hover/click and check all selected tags under the tooltip of operational tag.

Example screenshot from the website:

[SOLUTION B] Allow Multi-select and Filterable multi-select to have the Dropdown menu open for read-only states. The menu would be open but not operable. This way users can see/read the selected and un-selected options, but cannot interact with option items.

Both solutions seem viable according to Michael Gower This effort would need a Read-only state audit and design explorations to consider edge cases and finalise which way to proceed with.

[Kritvi-bhatia17]

Thanks, @Yohanna, for bringing this up!

While considering this, we might need to review the read-only states for other components as well to come to a solution. This might lead to revisiting our read-only states overall. Here is an issue for that.

[simongranthamibm]

This has also come up on a project that I'm working on. The component isn't great at showing what has been selected to begin with and becomes completely non-functional in the current read only state.

[adamalston]

Is this issue a duplicate of https://github.com/carbon-design-system/carbon/issues/10345?

[Risharay274]

Hi, I have a similar kind of requirement for showing the tags with partial names, in multiselect combox/ multiselect dropdown instead of just showing the number of items selected. We require this to use it in our Cloud console for VPC network. Priority: Medium. TIA, Risha Ray UX designer for IBM Cloud

[vimalav]

Hi team, we have the exact use case as Risha has mentioned above. This is required in wastsonX Orchestrate phone channel set up. Priority: High, Thanks!