Feature: Button for Selecting All ComboBox Entries

[jstueckrath]

In my project I needed the possibility to select all entries of the combo box and wrote a wrapper for it. However, I think this would be a good improvement for the box itself. In my case the last entry in the combo box had the label "select all" and did the following:

• if not all items are selected, pressing it selects all items
• if all items are selected, pressing it deselects all items
• if any item is selected by pressing it and this causes all items to be selected, "select all" is selected as well
• if any item is deselected by pressing it, "select all" is deselected as well

Although this is a possible way, I think one could achieve a better result by adding a button similar to the existing clear indicator. Maybe this can be extended functionally and visually to do the task as well?

[gatanaso]

Hi @jstueckrath,

Thanks for the proposal and for the detailed description.
Yes I do see that having a "select all" item could be a nice way to achieve this (same as you have already done). Though it might require some consideration in regards to how it affects the UX overall and especially in cases where there are large number of items.

Regarding the special button inside the component, it's an interesting idea. Though I am thinking if it would be confusing to users, unless it's a familiar pattern to them. It would be nice to think a bit more about the design and the behavior before trying to do any further implementation.

[jstueckrath]

@gatanaso, I am also not sure what the best design would be and if there even is a best design. The behaviour I described above worked well in my case, but is far from perfect. The logic is done on server-side limiting offline capability and the "select all" entry is layouted the same as all other entries, although it behaves differently.

I have very little experience in UX design, so I am not sure which design would be the best. Is there even a standard icon for "select all"? Nevertheless, a good design could improve the combo box.

[timmer3]

hi @jstueckrath @gatanaso
this is a very desirable feature for my situation. i agree that the feature should not confuse the UX/UI with unclear buttons or icons. there is a material icon for "done-all" that you could display in place of the existing X button. the 2 buttons would never appear together because if a user is selecting items one at a time then they aren't interested in the select-all button. if there is an existing selection, they can clear with the X and then access the Select all icon. the option could be configurable via a boolean property "allowSelectAll"

an alternative would be similar to the approach you took @jstueckrath, with a new list item at the top or bottom of the list.
another property "selectAllItemText" property that would display an item at the top of the list, such as ">> Select All" and when the user does this, all items become immediately ticked, the menu closes and then there are a whole bunch of items in the selected view.

with a few pointers from @gatanaso i'm available to do some work on this feature. i personally like the first option with a discreet icon button to do the magic and we are not adding a 'fake' list item to work as a button.

as an interim workaround i can float an icon button beside the combobox and do the select-all behaviour server side but that's not great for the user.

Thanks for building an incredible component.

[jstueckrath]

@timmer3
I would also prefer a solution with a small button instead of a "fake" list item. The double check mark icon seems to be a good choice, since selection is already visualized with check marks anyway.

I was wondering whether it makes sense to display the new icon together with the clear icon if at least one but not all items are selected. It would be helpful since this allows to select or deselect all items at once at anytime without opening the box. However, the space taken is probably not justified (especially in compact mode) given that you can do this by two clicks (first clear and then select all).

Moreover, I also vote for a property to toggle this feature.

[roman-hak]

This feature would be really nice, so I tried to implement it. The result is proposed via the pull-request #100. Please, take a look and let me know your opinions. I think it looks good from the UX perspective.