ComboBox prevents entering value that is the same as current value but with different case

[eberleant]

Description

If you have a combobox that allows custom values, select one of the values, then try to enter a "custom" value that is the same as the value you selected but a different case, the text you entered is changed to the value that was selected without triggering a custom value set or value change event. This happens even if a case-sensitive filter is applied to the ComboBox.

There appears to be some kind of autocorrect that changes the text in a combobox to be equal to its current value, if they are equal (case-insensitive).

Expected outcome

I would expect a custom value set event to be fired. If the developer wants values in the ComboBox to be evaluated case-insensitively instead, they could do something like:

comboBox.addCustomValueSetListener(event -> {
    String customValue = event.getDetail();
    comboBox.getListDataView().getItems()
            .filter(item -> StringUtils.equalsIgnoreCase(item, customValue))
            .findFirst()
            .ifPresentOrElse(comboBox::setValue, () -> comboBox.setValue(customValue));
});

Alternatively, an option could be added to evaluate ComboBox text case-sensitively. I realize the existing behavior is usually desirable so that the user won't have to enter the value exactly.

Minimal reproducible example

https://vaadin.com/docs/v22/example?embed=combo-box-custom-entry1-wc.js&import=component/combobox/combo-box-custom-entry-1.ts
(This is from the first example in the "Custom Value Entry" of the ComboBox page)

Steps to reproduce

1. Select "Chrome" from the ComboBox
2. Enter "CHROME" in the ComboBox
3. The text autocorrects to "Chrome". Custom value set event is not fired.

Environment

Vaadin version(s): 22, 23
OS: Mac 12.6.3

Browsers

Chrome, Firefox, Safari

[rodolforfq]

I am also able to reproduce this issue. I suspect this behavior is due to the client side component, as the server side customValueSetListener isn't triggered under these specific conditions.

If I use this code:

List<String> browsers = new ArrayList<>(List.of("Chrome", "Edge", "Firefox", "Safari"));
var comboBox = new ComboBox<String>("Browser");
comboBox.setAllowCustomValue(true);
comboBox.setHelperText("Select or type a browser");
add(comboBox);

ComboBox.ItemFilter<String> filter = (browser, filterString) -> {
    if (Objects.isNull(filterString) || filterString.isEmpty()) {
        return true;
    }
    return browser.equals(filterString);
};

comboBox.setItems(filter, browsers);
comboBox.addCustomValueSetListener(e -> {
    var customValue = e.getDetail();
    browsers.add(customValue);
    comboBox.clear();
    comboBox.setItems(filter, browsers);
    comboBox.setValue(customValue);
});

Everything works as expected and values are added even when they contain the same works with different case characters (the desired behavior). Thing is, when one of the original values is selected (say, "Chrome") and you try to enter something like "cHrOmE", the new value isn't added (the customValueSetListener isn't fired).

[yuriy-fix]

This could be expected by some users that the value is corrected with case-insensitive filtering, we could consider a new API for case-sensitive selection.