Implementing a Non-Wrapping, Count-Based Multi-Select Dropdown with MUI Chips
I am using the MUI library for a project that involves a multi-select dropdown with chips representing the selected data. The functionality is working well, but I'm encountering an issue with responsiveness: the chips are wrapping onto multiple lines. What I would like to achieve is a design where, instead of wrapping, it displays a text like "+2 more" or "+3 more" at the end when there are more items than can fit in a single line. I'm not sure how to implement this feature in MUI. Could anyone provide assistance or guidance on how to achieve this in MUI?
Code Sandbox Link: https://codesandbox.io/p/sandbox/mui-multiselect-sp4sg3?file=%2Fsrc%2FApp.js%3A10%2C13
I have attached my output and my required output images.
0 Replies