[combo-box] Multi-select

[jouni]

We have initial designs for this feature (mockups), but we need to write some end user scenarios to validate the designs (useful for user testing).

• Adding multi values
  • Order of selected items
  • MVP: keep all values visible in closed input
• Editing multi values
  • Keyboard navigation: select "chips/tokens" (not cursor between them)
• Removing multi values

[eximius313]

Will this feature look/work similar to this (unfortunately outdated) component?

[jouni]

Most probably yes, the selected values would be presented as “chips” or “tokens” in the input. The linked component is slightly different, as it only offers suggestions, and the combo box offers a selectable list of options without having to type anything. But we are also considering adding/doing an “suggest” type of feature.

[eximius313]

"suggest" would be a "+1" from me :)

[tuomasnironen]

Initial designs for multi select

[eximius313]

Looks very nice!
I'm eager to test it ;)
BTW - I think that optional possibility of adding completely new value (which does not yet exist on the list) is necessary, so please take this into account

[jouni]

Custom value support is already implemented, and will be opt-in from 1.0.0-alpha6 onwards (a new property for controlling it is added). The plan is to make that work with multi-select as well, so we got you covered there :)

[tookit]

Did anyone already implement the mulit-select?

[jouni]

@tookit not yet. I’m sorry if my previous comment was misleading. What I meant was that multi-select is on the roadmap and coming up sometime after 1.0.

[jay8t6]

+1

any idea when this will be implemented since we are on 1.1 now?

[jouni]

Hi @jay8t6, thanks for the interest!

Currently there are some other features prioritised over this one, namely vaadin/vaadin-combo-box#259 (custom filtering), vaadin/vaadin-combo-box#260 (lazy loading) and vaadin/vaadin-combo-box#106 (highlight filter matches).

Also, before getting to multi-select, we would like to implement vaadin/vaadin-combo-box#165 (custom item templates), but that is pending some work by the core Polymer library.

[jimmyvithalani]

I am also looking for this feature. I have started making few changes to the combo box to support multiple selection but I see there is good amount of work.
I see that it is in roadmap but because we need this in a shorter timeline (4 weeks) I will have to continue customising the control and use that for now. Later once the feature is available within, we will decide to use it.
I have listed down the changes needed for this feature for internal tracking. May be it is helpful here - I might be missing something so suggestions are welcome :)

1. Add multiSelection property for combo box, this is already available in iron-list.
2. Maintain "values" propert for multiSelection = true case
3. Prefill focused item label should be disabled when multiSelection = true
4. Space/Enter should check/uncheck the current item, this should not be given to input control
5. Add 'N values selected' or chips in the input area showing all selected values
   Some features not directly related but needed and in our scope:
6. Server side filtering
7. Mouse hover style for focused item
   And of course...
8. Tests updates
9. Demo page updates

Here is whet it looks like right now:
http://image.prntscr.com/image/ce847579f05d4443ad6ed42e93201317.png

[cmevawala]

+1 to @jimmyvithalani requirement

[jouni]

Sorry for the long delay in updates regarding this issue.

Thanks @jimmyvithalani for the concrete proposal and steps to actually implementing this. I have to admit, that we don’t have very concrete designs yet for this feature, how we would see it working, apart from the initial mockups Tuomas linked before. But your list and screenshot seem like a good starting point. The keyboard interactions will most probably require careful consideration and testing, which we haven’t discussed yet.

About the roadmap: currently we can only promise that we will get this under development during next year. I know that’s a really lame promise, and doesn’t really give you a warm and fuzzy feeling inside that you might have to wait for this feature many months still 😔

I can definitely dedicate some time in refining the designs and functional requirements for this feature if someone is eager to take it under development. But I also fear, that since it’s quite a big feature, touching many parts of the code, the development team might want to be involved quite a lot in the implementation design. I don’t want to discourage anyone from going ahead and starting the implementation, but I think it would be great if you could share the work early and often to gather feedback from the core team.

@Saulis, or others from the core team: how would you like to see this feature come up as a community contribution?

[Saulis]

We're always more than happy to receive contributions to the project, what's important to us of course, is that the implementation is aligned with the direction we'd planned to take it to. And the new feature needs to work cohesively with existing features like keyboard navigation, screen readers, custom values etc.

So as @jimmyvithalani said, it's a fair amount of work to get done inside 4 weeks, especially when we don't currently have concrete designs complete yet. So for them, it's probably feasible to go ahead with their fork of the combo-box and change back to the vanilla combo-box once this feature is implemented.

But as said, any help and input would be greatly appreciated!

[hyyan]

+1

[moderndeveloperllc]

@Saulis @jouni Any possibility of having this for 2.0? It has been a very long development cycle on this is seems :-)

[jouni]

Won’t happen for 2.0 (hybrid), and won’t make it to 3.0 (Polymer 2 version).

But still very much going to happen eventually.

[diregraph]

Eagerly waiting for the update!

[sudipta1411]

This feature would be greatly appreciated

[heruan]

Bumping this as it's a requirement for us to port some apps to Vaadin. Any ETA now that 4.0 has been released? Are there any mockups to preview how it'll look with Lumo?

[jouni]

I have some old mockups I did for the Bakery starter, which contained a multi-select combo box. I’ll dig that up.

I haven’t heard any plans yet that we would start implementing this. It has been on my personal “CF todo” for a while, but haven’t found the time to do anything.

[jouni]

Here’s the current thinking regarding visual design:

A couple of open questions regarding functionality:

• Do we hide the selected items from the dropdown? My current thinking is yes, so we don’t have to think about what happens if you re-select an item from there (does it toggle the selection or just keep it selected?)
• Do we hide the main clear button from the field, and just have the individual clear buttons for the tokens/chips?
• Do the tokens/chips wrap on multiple lines, or does the field scroll somehow?
• What happens when you have typed some value in the field, and then move the caret/cursor over or between tokens/chips? Do we always close the dropdown when the caret/cursor moves out of the actual input area (and reopen it when moving back)?

[moderndeveloperllc]

Just my input based off of using something similar with Select2. It might be useful to emulate the functionality of Select2 or other JS library as most devs will be coming from something similar.

Do we hide the selected items from the dropdown? My current thinking is yes, so we don’t have to think about what happens if you re-select an item from there (does it toggle the selection or just keep it selected?)

What do you do for current dropdowns? Not sure how hard it would be, but I would think that if the value is displayed (like List 1 above), it is displayed in the dropdown, but with the highlighted selected attribute. Selecting it again will remove it as a selection - the same as clicking the "x" beside it in the text area.

Do we hide the main clear button from the field, and just have the individual clear buttons for the tokens/chips?

I would say yes. Any "Clear All" would be a separate vaadin-button. You don't want to confuse people as to what any particular "x" might do.

Do the tokens/chips wrap on multiple lines, or does the field scroll somehow?

Wrap - similar to a textarea. It's very difficult to scroll a single text line area and make it look and feel good. That will mean that devs will have to account for how large the area can grow, but we have to do that anyways for vaadin-textarea fields!

What happens when you have typed some value in the field, and then move the caret/cursor over or between tokens/chips? Do we always close the dropdown when the caret/cursor moves out of the actual input area (and reopen it when moving back)?

I would only close on-click. Otherwise you get the issue of people having to be very careful with their mouse/trackpad to not overshoot the dropdown, etc. Always annoying when dropdowns "disappear" because of bad cursor pathing. It's the bane of nested menus too. on-click/on-tap would also keep the experience consistent between desktop and mobile devices.

[heruan]

Thank you Jouni for the update!

In my opinion, the token/chip design is far too different from the default combo box: enabling a feature should not change the UX that much; such a design could be useful but I'd see more fit a different element for that.

The default combo-box list already shows a check-mark for the selected item, then I'd expect just multiple check-marks if multi-selection is enabled. The content of the text-field then can be set with a custom function which takes the selected items as input, to output e.g. "5 items selected" (or the item itself for a single selection).

For example:

This way the UX won't change, the clear button clears the field value (e.g. empties the selection, as one would expect) and the field does not need to grow and occupy more space (or scroll) since it looks always the same, i.e. a <vaadin-combo-box>.

With this in mind, here's my answers to your questions:

Do we hide the selected items from the dropdown? My current thinking is yes, so we don’t have to think about what happens if you re-select an item from there (does it toggle the selection or just keep it selected?)

I'd say no, don't hide them: just show multiple check-marks and clicking an item with the check-mark will simply unselect it.

Do we hide the main clear button from the field, and just have the individual clear buttons for the tokens/chips?

No, don't hide the clear button: it should clear the field value, e.g. unselect all items.

Do the tokens/chips wrap on multiple lines, or does the field scroll somehow?

I'd prefer the component not to grow/wrap, but to behave like a text-field.

[moderndeveloperllc]

@heruan I would have to disagree with your example. Just indicating that multiple items have been selected is easy for the developer, but not intuitive or informative for a user. If I had selected Argon and Xenon, they are way too far apart for me to easily discern that. This is a big issue if you are doing a "Pick 5 of X" or "Choose Your Top 3" type of element and want to have a select box and not several dozen or so checkboxes. Select2, Selectize.js, Semantic UI, and others are "chip-based" multiselects. Anecdotally, I see more chip-based being used in the wild than I do "items selected" style of multiselect.

[heruan]

@moderndeveloperllc Of course, but you could always let the caption generator function to output the entire list of selected values instead of summarizing as "X items selected", e.g.

so that you can either open the list and check/uncheck or you can "backspace" the items one-by-one (expecting a single backspace to clear the whole item, as it already happens for single selection).

I'm not against a token/chip/tag container element, I just don't see it fit in <vaadin-combo-box> design.

[tomivirkki]

Drafted an example on how this functionality could be built using the existing <vaadin-combo-box-light>: https://glitch.com/edit/#!/poised-icicle

[sudipta1411]

@heruan Nice feedback. I just want to add one point. One should be able to select all options at once. Currently once an option is selected, the dropdown goes away. Then one have again click on the text area for the dropdown to reappear. But when selecting multiple options, the user might want to select a large number of options from the dropdown. In this case clicking each time on the input area is cumbersome.

[heruan]

@tomivirkki Great example on how to use vaadin-combo-box-light! I guess that component can be used right away for the token design.

I suppose the same approach could be also adopted to implement the design I proposed, but AFAIK currently there is no way to "check" more than one item in the dropdown menu; nor can the dropdown close behavior be intercepted to allow multiple selections at once, as @sudipta1411 suggested.

Do you have any suggestion? I'd love to contribute to get a vaadin-combo-box-multi included in the repo!

[tomivirkki]

Hi @heruan, the combo-box itself allows only one selection at once, but you can setup the item <template> to "highlight" all the items from selectedItems to appear as selected. Something like <template><span class="[[_generateItemStateClasses(item)]]">[[item]]</span></template>

[heruan]

Thank you for the suggestion! There's a last bit I'm missing: I can't find where/how in the code the checkmark for the selected item is set 😕

If the same checkmark can be set from the template, we're not that distant to a proper multi-select combo box!

[jouni]

The checkmark is set by the theme, based on the [selected] attribute on the item element: https://github.com/vaadin/vaadin-combo-box/blob/master/theme/lumo/vaadin-combo-box-item.html#L20

That custom property is then used here: https://github.com/vaadin/vaadin-item/blob/master/theme/lumo/vaadin-item.html#L26

It’s definitely not clean or pretty, but it was pretty much the only nice way to implement it with the current API.

A cleaner way would be to have an explicit [selectable] attribute for items that can have the checkmark (or some other style for marking a selected item), and something like <vaadin-menu> element that can also host <vaadin-item> elements, which would be more suitable for <vaadin-context-menu>.

[heruan]

Thank you @jouni, finally I see where the checkmark icon is defined!

Still missing in my mind map the link connecting vaadin-combo-box-item and vaadin-item, as I totally get lost around vaadin-combo-box-item.html#L119.

I'm not sure anymore this can be achieved with the same approach used in Tomi's fiddle.

[jouni]

AFAIK vaadin-item and vaadin-combo-box-item are not linked in any way at the moment. They just happen to expose mostly the same styling API.

[davidmacsix]

Hi @jouni the design looks great. I too really like the token/chip design.

I see this item has been open for quite a while, do you have any idea when it might be scheduled for release? I think it's a really important component to have when evaluating different web frameworks.

@heruan it sound like you allows got a workaround going using the templating, would you be able to share the details?

[heruan]

@Davidm76 I didn't get much far, as I got lost around the lines which create the item template (around vaadin-combo-box-item.html#L119):

comboBox._ensureTemplatized();
if (comboBox._TemplateClass) {
  this._itemTemplateInstance = new comboBox._TemplateClass({});
  this.$.content.textContent = '';
  this.$.content.appendChild(this._itemTemplateInstance.root);
}

and I'm still unable to understand those!

About the design, it seems I'm the only one which disagree with the chips: in my opinion multi selection should not change the UX that much (items disappearing, no more blue check marks on selected ones, invasion of chips…).

But if you like that design, @tomivirkki implementation should already be usable as a new custom element: https://jsfiddle.net/heruan/7b1g1hr8/1 (fixed using Polymer 2).

[jouni]

I hear you @heruan – the chips based design might a more specialized/configured element, and the out-of-the-box multi-select is more like you described.

As the component’s value is a String, the value visible in the field should reflect that. And by default, it could be a comma-separated list of the selected item labels.

At some point, I was thinking about a way to define the field value template/renderer, so that it would be possible to configure the selected items to show as tokens instead of just a plain string inside the field. To hide the selected items from the overlay, we could filter out the selected values from the filteredItems array (no pun intended), or something like that. Not sure how feasible this would be.

[jouni]

@Davidm76 yeah, this feature has been on the wishlist from the very beginning when we started to implement this component, but it keeps getting run over with other priorities (like migrating to Polymer 2, then Polymer 3, etc. 😜)

Still can’t make any promises. The code base for this component is also not very pretty, so the team might want to pay some tech debt before starting to work on this kind of a big new feature.

[selvinfehric]

I have adapted @tomivirkki answer and created multi-select-combo-box based on vaadin-combo-box. You can check it here: https://github.com/selvinfehric/multi-select-combo-box

It is adapted for Polymer2. It can be themed if you include material or lumo theme for vaadin-combo-box and vaadin-textfield. And you can pass it a list of primitives or objects and use display-field property to handle what is shown in the list. Those are changes to @tomivirkki's sample.

It is published to webcomponents.org and you can see a demo here:
https://www.webcomponents.org/element/selvinfehric/multi-select-combo-box

Please report any issues and feel free to contribute!

[dejan9393]

@selvinfehric Thanks! I've made a PR to upgrade your work to Polymer 3 using polymer-modulizer: #1

[twferrell]

Hey guys. Very sorry in advance for this dumb question, but here goes...
I'm brand new to Vaadin and just starting to get my head wrapped around the architecture and currently playing around with a few demos. I understand the the Architecture has changed with version 10+ and I'm doing a little POC with version 12 actually (using Spring Boot). Anyhow, my question is, for my POC I was looking for a component that does EXACTLY what this multi-select-combo-box does. In fact, it's 100% perfect for what I need. Only problem is, as I'm still getting my head wrapped around the component architecture, I'm a little confused on how to install this and more importantly, how utilize this component from the server-side (using Java API). I looked at the project on Github and all I see is the front-end component definitions. Does this mean that the Java side still needs to be implemented or is it that I can install it and use from Java now and that I just need to be pointed to some documentation on how to install these and get up to speed on the Polymer concepts? Any help/suggestions will be greatly appreciated.

[gatanaso]

Inspired by the excellent discussion here and @tomivirkki's comment I have created a multiselect combo box component.

The code is available on github and here is the link to the live demo↗

The component is published on webcomponents.org as well as in the vaadin directory.

Please feel free to check it out and report any issues.

Feedback and contributions are very welcome, thank you!

[twferrell]

@gatanaso

This component looks awesome! Exactly what I need. I am new to Vaadin so I just came across this tutorial on how to wrap the web component with Java API. So I'm about to try it out. Before I go down that path, just thought I'd ask first...is there any plan on adding this component as a Maven dependency with Java API? If so, I'll just use that. I didn't notice any Maven documentation on the Vaadin Directory site.

[twferrell]

Hi @gatanaso

I believe I'm almost there, but I'm not sure how to set the actual items yet. I was able to set the selectedItems property, but when I tried similar for "items" it's not working. I'll keep trying, but let let me know if you have some suggestions. Sorry, for dumb questions. Totally new to this and still learning the architecture. Thanks!

[gatanaso]

Hi @twferrell, I am glad the component fits your needs. At the moment, this is only a web component with no Java integration. I am planning to integrate it to Flow as soon as I have more time available.
Regarding your above question, I think you are on the right path, though I cannot say for sure why it's not working as I would need to dig deeper into the code.

[jay8t6]

@gatanaso great work on the component!! I did not know it existed. Nice work!

[gatanaso]

@gatanaso

This component looks awesome! Exactly what I need. I am new to Vaadin so I just came across this tutorial on how to wrap the web component with Java API. So I'm about to try it out. Before I go down that path, just thought I'd ask first...is there any plan on adding this component as a Maven dependency with Java API? If so, I'll just use that. I didn't notice any Maven documentation on the Vaadin Directory site.

@twferrell

I am happy to say that I've created the initial Vaadin Flow integration of the multiselect-combo-box web component 🎉

The code is available on github and the add-on has also been published to the vaadin directory.

Please feel free to check it out and report any issues.

Feedback and contributions are very welcome, thank you!

[bram-pkg]

Are there any updates on this issue? It would be nice to have first-party support for this.

[web-padawan]

@bramceulemans this feature is not in the short term backlog at the moment.

However, multi select combo box is one of the improvements that we keep in mind, and it might be that we include it to the next generation components (that will be built with LitElement).

[moderndeveloperllc]

@bramceulemans While we wait to see if this component will get multiselect, I have had good results with @gatanaso's https://github.com/gatanaso/multiselect-combo-box/. He just merged in a fix for what was my only quibble - a way to address the renderer for the dropdown display.