Multiselect Combo Box: allow showing all labels

[OlliTietavainenVaadin]

Describe your motivation

Based on feedback: https://vaadin.com/forum/thread/18816965/p-vaadin-v23-2-0-includes-component-multi-select-combo-box-p
For me, for example, the new Vaadin mscb is not usable, because it doesn't provide option to always show full item labels.

There should be an option to not collapse the tags even if it might look awkward with a lot of selected items.

Describe the solution you'd like

Every selected item should be visible and not collapsed.

Describe alternatives you've considered

No response

Additional context

No response

[MingjieZhu]

We need the mscb auto expand to display full items too. There are many important reasons:

• printed/PDF (for archive) must display all items;
• 508 compliance, screen reader needs to read the selected items, not just the count;
• It acts as the breadcrumb trail for our filtered report;

[knoobie]

508 compliance, screen reader needs to read the selected items, not just the count;

Screenreader already get all items 😉

[jouni]

I think this feature is coupled with the feature of wrapping the items on multiple lines, and allowing the input height to grow (can't find the issue now).

[web-padawan]

@jouni That was mentioned in a somewhat unrelated issue: #4185 (comment)

[jcgueriaud1]

I don't like the way the selected items are wrapped in Goran's addon but collapsing the items makes the component quite painful to use.
To see the item you have to put the mouse cursor, wait for a couple of seconds, see the wrong value then you have to scroll or filter to click on the item.
Would it be possible to add the selected at the beginning of the list?

[knoobie]

@jcgueriaud1 Issue you are looking for #4185

[jcgueriaud1]

True, let's vote for these 2 issues.

[mcentrih]

Is there any update regarding this issue? I would need something like MultiSelectVariant.SHOW_ALL_ITEMS, and then the component would show all or if i set sizeFull that the items would be displayed over whole size of comonent.

[juuso-vaadin]

Here's a CSS workaround to get the chips to wrap. It's far from the ideal solution as the input field within component ends up being very small. Dropdown icon is absolutely positioned which causes the clear button to be unusable.

Also it doesn't yet solve the original issue of showing full item labels.

vaadin-multi-select-combo-box[theme~="wrap-chips"][has-value] {
    --input-min-width: auto;
}

vaadin-multi-select-combo-box[theme~="wrap-chips"][has-value]::part(chips) {
    flex-wrap: wrap;
    gap: var(--lumo-space-xs);
    padding: var(--lumo-space-xs) 0;
    max-width: calc(100% - var(--lumo-size-l) - var(--lumo-icon-size-m));
}

vaadin-multi-select-combo-box[theme~="wrap-chips"][has-value]::part(toggle-button) {
    position: absolute;
    right: var(--lumo-space-xs);
}

vaadin-multi-select-combo-box[theme~="wrap-chips"] input {
    width: var(--lumo-size-l);
    padding-right: var(--lumo-space-l);
}

vaadin-multi-select-combo-box[theme~="wrap-chips"] vaadin-multi-select-combo-box-chip {
    overflow: hidden;
}

Result

[juuso-vaadin]

Here's another variant with chip labels breaking to multiple lines. This one doesn't require absolute positioning, but has the same issues with input size.

vaadin-multi-select-combo-box[theme~="break-chips"][has-value] {
    --input-min-width: auto;
}

vaadin-multi-select-combo-box[theme~="break-chips"][has-value]::part(chips) {
    flex-wrap: wrap;
    gap: var(--lumo-space-xs);
    padding: var(--lumo-space-xs) 0;
    max-width: calc(100% - var(--lumo-size-l));
}

vaadin-multi-select-combo-box[theme~="break-chips"] input {
    width: var(--lumo-size-l);
}

vaadin-multi-select-combo-box[theme~="break-chips"] vaadin-multi-select-combo-box-chip {
    white-space: normal;
}

Result

[urkl]

This really is great. It's a progress!

[juuso-vaadin]

Here's some additional context for the challenges with displaying selected items.

Long item labels fall to overflow chip immediately.
Showing chip with ellipsis overflow would be better in this case.

Item may be prefixed with an ID. Users have reported misunderstandings between item ID's and overflow chip.
Potential solution could be to allow items to have aliases that are shown in chips.

Presentation of long item labels in overlay is challenging. Overlay width is limited by input size. Most likely Custom Item Presentation could be used as in regular ComboBox.

Overflow chip has an tooltip for showing the items. Would it be possible to return list of all selected items so one could present those in some other element (i.e. popup)?

[alkali47]

This CSS snippet is very close to what I needed. I think it'll be a very welcome addition to have a wrap-chips variant.

I made a couple of additions to mine to hide the toggle arrow, move the input to the top and only show it once focused.

vaadin-multi-select-combo-box.css

:host([theme~='wrap-chips'][has-value]) [part='chips']{
    flex-wrap: wrap;
    gap: var(--lumo-space-xs);
    padding: var(--lumo-space-xs) 0;
    max-width: 100%;
}

:host([theme~='wrap-chips']) [part='toggle-button']{
    display: none;
}

:host([theme~='wrap-chips']) input {
    width: var(--lumo-size-l);
    padding-right: var(--lumo-space-l);
}

:host([theme~='wrap-chips']) vaadin-multi-select-combo-box-chip {
    overflow: hidden;
}

:host([theme~='wrap-chips'][focused]) ::slotted(input) {
    order: -1;
    padding: 0 var(--lumo-space-xxs);
}

:host([focused][has-value]) ::slotted(input) {
    --lumo-text-field-size: 36px;
    padding-top: var(--lumo-space-xxs);
}

:host([theme~='wrap-chips'][focused]) {
    --container-flex-wrap: wrap;
}

:host([theme~='wrap-chips'][has-value]) [part='chips'] {
    gap: var(--lumo-space-xs);
    padding: var(--lumo-space-xs) 0;
}

:host([theme~='wrap-chips']) [part~='chip']:not(:last-of-type) {
    margin-inline-end: 0;
}

:host([theme~='wrap-chips']) ::slotted(input) {
    flex: 1 1 auto;
}

vaadin-multi-select-combo-box-container.css

:host {
   padding-left: 12px;
   padding-right: 12px;
}

#wrapper {
    flex-wrap: var(--container-flex-wrap);
}

:host([theme~='wrap-chips'][has-value]) [part='chips'] {
    padding: var(--lumo-space-s) 0;
}

Additionally, to enable focusing by clicking anywhere in the field, MultiSelectComboBox needs to be extended and this code is added to the constructor of the child class:

getElement().addEventListener("click", evt -> getElement().callJsFunction("focus", true));

[alexanoid]

@alkali47 @juuso-vaadin Thanks! Should this work for Vaadin 24.2.0 ? I added 2 files:

vaadin-multi-select-combo-box.css
vaadin-multi-select-combo-box-container.css

to themes\THEME_NAME\components folder but nothing happens..

[alexanoid]

Dear Vaadin Team, please incorporated the feature into the core library component. I have numerous pages in my application where I require its functionality.

[juuso-vaadin]

vaadin-multi-select-combo-box.css vaadin-multi-select-combo-box-container.css
to themes\THEME_NAME\components folder but nothing happens..

@alexanoid Did you also set the theme?
multiSelectComboBox.addThemeName("wrap-chips");

[alexanoid]

@juuso-vaadin Oops! That was my mistake. Thank you for pointing it out. Now everything is working correctly!

[alexanoid]

@juuso-vaadin But there is one issue - the multiSelectComboBox doesn't release the focus on the first click outside of the component. It only releases the focus on the second click.

[knoobie]

That's the intended behavior to allow multiple selection. Please don't spam this issue with unrelated question. Create a new issue, if you think you found one.

[TatuLund]

If we allow showing all labels, it also creates a need for possible new API's. In many apps the labels in drop down can be long, and unpractical to show in the chips, where you probably want to show shorter version of the label. Hence one would need something like setChipLabelGenerator that would be used for chips if exists.

Consider this example

@Route("multi")
public class MultiBoxView extends Div {

    public MultiBoxView() {
        MultiSelectComboBox<Bean> combo = new MultiSelectComboBox<>();
        Bean bean1 = new Bean("1.1", "First name");
        Bean bean2 = new Bean("1.2", "Second name");
        Bean bean3 = new Bean("1.3", "Third name");
        Bean bean4 = new Bean("1.4", "Fourth name");
        combo.setItems(bean1, bean2, bean3, bean4);
        combo.setItemLabelGenerator(
                bean -> bean.getCode() + ":" + bean.getName());
        combo.addThemeName("break-chips");
        add(combo);
    }

    public class Bean {
        private String code;
        private String name;

        public Bean(String code, String name) {
            this.code = code;
            this.name = name;
        }

        public String getCode() {
            return code;
        }

        public void setCode(String code) {
            this.code = code;
        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }

    }
}

And corresponding CSS

vaadin-multi-select-combo-box[theme~="break-chips"][has-value] {
    --input-min-width: auto;
}

vaadin-multi-select-combo-box[theme~="break-chips"][has-value]::part(chips) {
    flex-wrap: wrap;
    gap: var(--lumo-space-xs);
    padding: var(--lumo-space-xs) 0;
    max-width: calc(100% - var(--lumo-size-l));
}

vaadin-multi-select-combo-box[theme~="break-chips"] input {
    width: var(--lumo-size-l);
}

vaadin-multi-select-combo-box[theme~="break-chips"] vaadin-multi-select-combo-box-chip {
    width: 45px;
}

vaadin-multi-select-combo-box[theme~="break-chips"] vaadin-multi-select-combo-box-chip::part(label) {
    text-overflow: unset;
}

[alexanoid]

I may be wrong but looks like it was released in version 24.3.0.alpha1. I upgraded to this Vaadin version but I am unable to see the new API for the MultiSelectComboBox.

Could you please show how to use it in order to display all selected chips?

[knoobie]

The flow API is not included in the first alpha. The Vaadin Bot is probably commenting on the issue once that's released as well. Later it's probably going to be "setAllChipsVisible(true)".

[web-padawan]

Yes, the comment above is correct. There will be alpha2 published soon and it will include setAllChipsVisible() API.