Allow Changing Delimiter for Select Component When Set to multiselect

[Ri-gers]

Currently, if in a Select component multiple items are selected, the values show up delimited only by a blank. Please change this to allow other characters to be delimiters, too - at least a comma would be desirable (or give an option to more clearly distinguish between a blank used as a delimiter and a regular blank as part of a selectable item).
This is important if the selected items themselves contain blanks thus causing confusion because it is not directly clear, whether the blank is part of the selected item or in fact a delimiter between two separate items.

[vegegoku]

The select is implemented to actually allow anything to be used to represent the selected option, and instead of forcing one way or another to do so it is left to the user to decide what he wants to display, the implementation will use what ever component is defined by the select option

  /**
   * Creates a new SelectOption with the provided key, value, component supplier, and menu item
   * supplier.
   *
   * @param key The unique key for the option.
   * @param value The value associated with the option.
   * @param componentSupplier The supplier for the option's component.
   * @param menuItemSupplier The supplier for the option's menu item.
   */
  public SelectOption(
      String key,
      V value,
      OptionSupplier<DivElement, V> componentSupplier,
      OptionSupplier<AbstractMenuItem<V>, V> menuItemSupplier) {
    super(key, value, componentSupplier, menuItemSupplier);
  }

check out this constructor which what other constructors delegate to, notice that there is no definition for a delimiter, if you follow up with that code you it will append the option component as is.

In short just define your own SelectOption to do what you want.

[vegegoku]

you can also apply some simple css to achieve some good results with this, for example this

.dui-selected-option {
    margin: 0 var(--dui-spc-1);
}

.dui-form-select .dui-field-input .dui-selected-option:not(:last-child):after {
    content: "";
    position: absolute;
    width: var(--dui-spc-1);
    background-color: black;
    height: 1px;
    bottom: 50%;
    margin: 0 var(--dui-spc-1);
}

Result

It will up to you to decide how to make sure this applies only where it should be if you have a different case.

[Ri-gers]

Thank you so much, those suggestions were very helpful :)