mi6
[ic-select-multiselect]: Display chips within IcSelect input value
Summary
When selecting multiple items from the dropdown list, the values within IcSelect appear as text. This ticket is to add a new feature which allows chips to appear within the IcSelect input.
💬 Description
When selecting items from IcMenu, the selected values will appear as chips within the IcSelect input element. At the time of writing, this will only appear for the multi-select functionality. Selecting or deselecting the chips will add or remove the chip from the IcSelect input. Something to consider is if dismissible chips should be used. This will allow consumers to remove the value from a selected state without opening the IcMenu and then deselecting the option.
Things to consider
- What happens when the number of chips do not fit in the IcSelect input space? Do they stack or not?
- If the chips are not stacked, does the chip which is cut off by IcSelect appear truncated like the current text implementation?
💰 User value
This adds flexibility to how values are displayed within the IcSelect. Also, displaying chips may be a better approach for displaying a particular type of data.
📚 User Stories
(To be completed after further exploration) If relevant, describe the high-level functionality as user stories.
As an ICDS user:
I need
So that
📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
Given that I have an IcSelect with no selected options
When I select an option
Then the value should appear as a chip in IcSelect
Given that I have an IcSelect with x number of selected options
When I deselect an option
Then the chip should be removed from IcSelect input
Given that I have an IcSelect with x number of selected options appearing as dismissible chips
When I click the dismiss button on the chip
Then the chip should be removed from IcSelect input
Given that I have an IcSelect with x number of selected options appearing as dismissible chips
When I click the dismiss button on the chip
Then the option should no longer have the selected state when opening the IcMenu
✏ Designs
If there's a Figma design file (or other mock-up), include it here.
## 🧾 Guidance If there's written guidance or documentation, include a link to it here.
Additional info
Example:
- MUI: https://mui.com/material-ui/react-select/#chip
Note to designers: use MUI example linked in Additional Info for inspiration, consider if we want to 'one up' them with dismissible chips
Would be potentially blocked from developing until https://github.com/mi6/ic-ui-kit/issues/3549 has been fixed
The requirement here isn't specifically to add chips inside a select component, it's more along the lines of; can we provide a mechanism for displaying selected values of a multiselect component when not expanded and provide the ability to remove selected values without opening the multiselect.
Placing chips inside a field may prove to be difficult for keyboard accessibility and focus states.
