search

iTwin / iTwinUI

A design system for building beautiful and well-working web interfaces.
https://itwin.github.io/iTwinUI/
MIT License
105 stars 38 forks source link

Clear button on individual pills/clear all button in multiselect ComboBox #2215

Open morgankertz opened 2 months ago

morgankertz commented 2 months ago

Feature

We are using the ComboBox in Pineapple and would like to request the ability to clear selected items without having to scroll the list to find them. If there are lots of options in the ComboBox, this can become cumbersome for the user to find/deselect the item.

scrolltodeselect

Additionally, we'd like to request the ability to clear the ComboBox entirely in one click without having to deselect each item. I've put some examples on how react-select works that would be ideal for our use.

Examples

Include a close or "x" button on each "pill" that appears when multiple items are selected. This example is from react-select:

image

Also include a close or "x" button to the far right of the component that clears all selected elements. This example is also from react-select:

clearallreactselect

mayank99 commented 2 months ago

For the "remove" button on individual tags, you can track and 👍 this issue: #907

For the "clear" button in the combobox input, I think it totally makes sense and would be useful even for single-select ComboBox. You might be able to implement it yourself using InputWithDecorations but we should just have it built in.

morgankertz commented 2 months ago

Ah, sorry I should've double checked for that before I filed this. I will track that work item 😄 Thanks for your reply Mayank!