[combo-box] Entering invalid value should trigger invalid state upon blur

[rolfsmeds]

Description

If a value is entered into a combobox with no matching item (and new item entry not enabled), the entered value simply disappears when the field is blurred, instead of triggering the invalid state as it does in vaadin-date-picker.

Expected outcome

Combox invalid state is triggered.

Actual outcome

Invalid value simply disappears from the field.

Steps to reproduce

1. Have a combobox populated with options "a", "b" and "c".
2. Enter the value "x" into the input field.
3. Click outside the combobox to blur it.

[web-padawan]

Waits for vaadin/vaadin-combo-box#775 to be implemented first (autoFocusFirstMatch).

[rolfsmeds]

After giving this a bit more thought the proposed behavior would be at odds with the conceptual model of the combobox, which is that the typed value is primarily a filter for the list, from which a value still needs to be explicitly picked (unless the exact value of one of the items is typed, or custom values are enabled). By this model, typing a string that matches nothing into the field cannot be considered invalid input, as it is simply a filter.

Even with the autoFocusFirstMatch behavior proposed in https://github.com/vaadin/vaadin-combo-box/issues/775, this conceptual model would still apply.

[rolfsmeds]

The below workaround by @yuriy-fix might be useful for those interested in this issue (although not guaranteed to work correctly in all situations):

List<String> list = Arrays.asList("Google Chrome", "Mozilla Firefox", "Opera",
    "Apple Safari", "Microsoft Edge");
ComboBox<String> comboBox = new ComboBox<>("Browsers");
comboBox.setAllowCustomValue(true);
comboBox.setItems(list);
comboBox.addCustomValueSetListener(event -> {
    // All matches
    List<String> matchList = list.stream()
            .filter(item -> item.toLowerCase().contains(event.getDetail().toLowerCase()))
            .collect(Collectors.toList());
    // Checks if there is exactly one match
    if (matchList.size() == 1) {
        comboBox.setValue(matchList.get(0));
    } else {
        comboBox.setValue(event.getDetail());
    }
});
Binder<TestBean> binder = new Binder<>();
binder.forField(comboBox).asRequired()
        .withValidator(value -> list.contains(value),
                "Please select one of the available values")
        .bind(TestBean::getName, TestBean::setName);
TestBean item = new TestBean();
binder.setBean(item);

private class TestBean {
    private String name;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}

[rolfsmeds]

Related: #942

[vursen]

We've got complaints about that during validation UX testing recently too.

If you make a typo while entering “Helsinki” into a city field, the entire input is thrown away as soon as you blur out of the field. This is annoying because (1) you don't know what went wrong (2) you have to write your city name or whatever again from scratch.