ComboBoi/MultiSelectComboBox focus behavior when clicking label is different than Select/DatePicker

[TatuLund]

Description

We have multiple field components which have dropdown popup. These differ in focus / blur behavior when clicking the label while the dropdown is open.

In case of ComboBox and MultiSelectComboBox when the dropdown is open and one clicks the label of the component, the blur event is fired and focus event is fired after that.

In case of Select and DatePicker clicking label will not emit blur event and hence no focus event is fired either.

Expected outcome

I would expect the behavior of these components to be consistent. I.e. they would fire focus and blur events in similar fashion.

Furthermore I think Select and DatePicker behavior is more correct.

Minimal reproducible example

@Route(value = "combo-focus", layout = MainLayout.class)
public class ComboFocusView extends VerticalLayout {

    public ComboFocusView() {
        setSpacing(true);
        setPadding(true);
        List<String> items = new ArrayList<>();
        for (int i = 0; i < 40; i++) {
            items.add("Item " + i);
        }
        ComboBox<String> comboBox = new ComboBox<>("ComboBox");
        comboBox.addBlurListener(
                event -> System.out.println("Combo: Blur event fired!"));
        comboBox.addFocusListener(
                event -> System.out.println("Combo: Focus event fired!"));
        comboBox.setItems(items);

        MultiSelectComboBox<String> multiComboBox = new MultiSelectComboBox<>(
                "MultiSelectComboBox");
        multiComboBox.addBlurListener(
                event -> System.out.println("Multi: Blur event fired!"));
        multiComboBox.addFocusListener(
                event -> System.out.println("Multi: Focus event fired!"));
        multiComboBox.setItems(items);

        Select<String> select = new Select<>();
        select.setLabel("Select");
        select.addBlurListener(
                event -> System.out.println("Select: Blur event fired!"));
        select.addFocusListener(
                event -> System.out.println("Select: Focus event fired!"));
        select.setItems(items);

        DatePicker picker = new DatePicker("DatePicker");
        picker.addBlurListener(
                event -> System.out.println("DatePicker: Blur event fired!"));
        picker.addFocusListener(
                event -> System.out.println("DatePicker: Focus event fired!"));

        add(comboBox, multiComboBox, select, picker);
    }
}

Steps to reproduce

• Click the field -> Popup opens
• Click the field label
• Observe console output

Environment

Vaadin version(s): Vaadin 24.4.11

Browsers

No response

[web-padawan]

Note: we should also ensure that TimePicker and MultiSelectComboBox work consistently. Currently, these components do not open overlay on label click, unlike ComboBox and DatePicker (which have that handled by _onHostClick).

[vursen]

Here is another observation. If I click on the DatePicker's label while the dropdown is open, focus goes to an unknown place, and the dropdown remains open, which is weird.

Private Zenhub Video

https://vaadin.com/docs/latest/example?path=component/datepicker/date-picker-basic.ts