Add option to show how many items are selected instead of showing them all

[FluffyDiscord]

I am currently facing an issue where my select needs to be slim and can not expand vertically when selecting multiple things.

I suggest to allow showing how many items are selected if there is more than 1 item selected instead of showing them all. Selected items would also remain in the dropdown list and would be on top, so user can quickly de-select them.

How it looks:

How I imagine it would look like with this specific feature implemented:

[mskocik]

You mean something like this with collapseSelection property?

[FluffyDiscord]

Kind of like that. The selected items should not be scrollable to the side, but show as mentioned, at the top of the dropdown list.

[mskocik]

Personally I don't think your suggestion is a good UX, when items jumps in the list up and down.

From technical perspective it's not possible with current implementation. Only thing, that could be updated is that collapseSelectionFn can return HTML string to be styled

Overflow was there just to demonstrate that ability to remove whatever items is still preserved.

[FluffyDiscord]

The dropdown list is being updated anyway whenever user selects/deselects something so the items still jump in and out of existence.

Then what about making two lists - one with all selected options, second one bellow with the rest of the options just as shown? Both would be scrollable individually. That should be actually easier to implement, since there's no need to re-sort whole option list just to put selected ones on top.

[mskocik]

But is difference between hiding selected option from the list and jumping to the start of the list.

I am planning refactoring with additional slots for v4, so this would be possible then.

[FluffyDiscord]

Any ETA on that please?

[mskocik]

Hopefully this year 🤞. I know that's not very helpful... But I don't have that much free time now.

[mskocik]

Check the updated REPL. That's basically your use case

[FluffyDiscord]

Unfortunately not, since it expands the input vertically. I can not have that. I will try making a PR today

[FluffyDiscord]

Adding link to PR #152