mi6 / mi6/ic-ui-kit

[ic-select-multiselect]: Display chips within IcSelect input value

Open
#2,421 3 comments 0 reactions 0 assignees View on GitHub
multi-select component select component
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

## 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?

![image](https://github.com/user-attachments/assets/3afe39d3-632b-4420-8e54-153f3bc98547)

## 💰 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

Contributor guide

Open the contributing guide

Research direction

Start by inspecting the existing IcSelect and IcMenu implementations to understand how multi-select values and selected states are represented. Resolve the open chip layout and dismissible-chip decisions, then verify the listed selection and removal acceptance criteria, including synchronization with IcMenu.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.