Render Vaadin icons inside MultiSelectComboBox's input-field using HasPrefix

Flow
1

Hello!

Our client has a use case where he wants to be able to select multiple items represented by Vaadin icons inside a combo box. We want the selected values to be also rendered in the input field as icons instead of a text. This particular combo box is going to be used as multi item filter for grid.

Below is a picture of our current ComboBox which renders text.
image

I thought about using HasPrefix interface to manually set these icons (grouped by Span) whenever the selection change.
I have found out that extending Vaadin’s MultiSelectComboBox with interface HasPrefix allows us to put prefix slot inside it’s element. The missing thing is to be able to put <slot name="prefix" slot="prefix"></slot> inside a <vaadin-multi-select-combo-box-container part="input-field"> as it is in a regular ComboBox

How to achieve this?

Below is a picture of something similar that we would like to achieve but using emojis put into strings.
image

2

If you have a fixed / known set of values then an item class name generator might work.

You could then use a CSS class that loads an SVG into a pseudo element:

vaadin-multi-select-combo-box-chip.success::part(label)::before  {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='green' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-check'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l5 5l10 -10' /%3E%3C/svg%3E");
  display: block;
  width: 20px;
  height: 20px;
}
vaadin-multi-select-combo-box-chip.success::part(label)  {
  width: 20px;
  height: 20px;
}

Looks like this:

Bildschirmfoto 2025-03-10 um 18.57.06
Bildschirmfoto 2025-03-10 um 18.57.06820×156 5.29 KB

1 Like
3

I went with a different hacky solution though it is not perfect.
I set the background color of labels to their coresponding statuses and styled the label to look like a circle. I do not display any text for them except for the light green status with i. The items in the dropdown are still rendered as VaadinIcons Pic below
image.

The problem is that even though selected chip/labels would fit in the input field they are collapsed into this gray overflow chip. Is it possible to change this behaviour so that every chip/label is always displayed if they would fit?

image

4

You can use multiSelectComboBox.setAutoExpand(AutoExpandMode.HORIZONTAL); to expand to fit all chips, but there’s a known issue that it doesn’t use space efficiently: Multi-select keeps expanding even though there's enough room for multiple chips · Issue #6897 · vaadin/web-components · GitHub