API for setting dropdown popup overlay width

[mvysny]

Describe your motivation

In certain apps, certain ComboBoxes tend to have items with long texts. If the text won't fit the default dropdown popup width, the text will wrap, which is often not desired.

It would be good to have a means to override the dropdown width and specify an exact number in pixels.

This was filed as vaadin/vaadin-combo-box-flow#387 ; the issue was closed but not implemented since there's no Java API.

Describe the solution you'd like

I want to be able to call comboBox.setDropdownWidth("30em").

Additional context

Workaround/how this function should be implemented:

comboBox.getElement().getStyle().set("--vaadin-combo-box-overlay-width", width.trim())

[archiecobbs]

This bug is basically a one line fix, and yet is over 1.5 years old.

What's the holdup??

[mvysny]

Workaround for Kotlin: use karibu-tools

[mvysny]

Solution for ComboBox and MultiSelectComboBox:

@Route("")
public class MainView extends VerticalLayout {

    public MainView() {
        final ComboBox<String> cb = new ComboBox<>("cb");
        cb.setItems("1", "2", "3");
        setDropdownWidth(cb, "40em");
        final MultiSelectComboBox<String> mcb = new MultiSelectComboBox<>("mcb");
        mcb.setItems("1", "2", "3");
        setDropdownWidth(mcb, "60em");
        add(cb, mcb);
    }

    private static void setDropdownWidth(ComboBox<?> cb, String width) {
        cb.getStyle().set("--vaadin-combo-box-overlay-width", width);
    }
    private static void setDropdownWidth(MultiSelectComboBox<?> cb, String width) {
        cb.getStyle().set("--vaadin-multi-select-combo-box-overlay-width", width);
    }
}

[mvysny]

Acceptance criteria: set the width of the dropdown to 30em or larger, and observe that the dropdown is visibly wider than the ComboBox itself.