ComboBox loses value entered from keyboard if filtering is done on server-side

[guttormvik]

In example below I have 2 almost equal ComboBox. One with values1..49, one with values 1..51.
When running, if I write "22" and tab out, the value is accepted in the 1st combobox, and lost in the 2nd.
If I wait until the filtering is done for the 2nd ComboBox it works, but this is not very user friendly.

@Route
public class ComboBoxView extends HorizontalLayout {

	public ComboBox<String> createComboBox(int itemCount) {

		List<String> stringList = new ArrayList<>(); 
		
		for(int i=1; i<=itemCount; i++) {
			stringList.add(Integer.toString(i));
		}
		
		ComboBox<String> comboBox = new ComboBox<>("ComboBox 1.."+itemCount);
		comboBox.setItems(stringList);
		
		return comboBox;
		
	}
	
	public ComboBoxView() {
		add(new TextField("Before"), createComboBox(49), createComboBox(51), new TextField("After"));
	}
	
}

[web-padawan]

Thanks for the issue, transferred it to the correct repository.

[alvarezguille]

I agree, currently this doesn't seem to be user-friendly. However the appropriate logic requires some design and research.

The reason why it's working so is because before lazy loading the needed item, comboBox doesn't know if this item exists. When blurring the field, comboBox cancels all of the requests to server, so the filter is cleared and nothing is selected.

On the other hand, if it would still try to load items even after blurring, then it will be preserving the value until server roundtrip to ensure the item exists and clear the value otherwise.

So in real life it would look like: You are typing something to the field, the value seems to be accepted on blur, you are working with other parts of the UI and suddenly value of the combo-box is cleared because it didn't find the item on server-side (as i.e. there was a small typo in the filter value). So it requires design in terms of adding some "loading" spinner / state to the input.

The filtering logic in terms of how it will be accepting value also requires design. Should it select the value only in case there is one match or should it be customizable with some API?

Moreover, the performance can be affected in that case and requires research. For example, you have ± 20 comboBoxes on the page and each of them starts searching for the needed item on blur with sending requests to the server.

One possible workaround for this is to handle custom value on the server-side, then you can check if there is an item that matches the custom value and set it programmatically or reset the value if there is not match as done in this example:

List<String> items = new ArrayList<>();
for (int i = 1; i <= 1000; i++) {
    items.add(Integer.toString(i));
}
ComboBox<String> comboBox = new ComboBox<>("Workaround example");
comboBox.setItems(items);
comboBox.addCustomValueSetListener(event -> {
    if (items.contains(event.getDetail())) {
        comboBox.setValue(event.getDetail());
    } else {
        comboBox.setValue(null);
    }
});

HTH

[tulioag]

Fixed. Tested in current master with webcomponent v5.4.6.

Fix is #961

[guttormvik]

If the text you write is in different case ("bb") than the values ("BB"), then you have to wait until the filtering is completed before tabbing out. Ie same issue as before. If you tab before filtering is complete, you lose the value.

Tested with Vaadin 19.0.5

@Route
public class ComboBoxBugView extends MasterScreen {

	public ComboBox<String> createStringComboBox() {

		List<String> list = new ArrayList<>(); 
		
		for(char a = 'A'; a<='Z'; a++) {
			for(char b = 'A'; b<='Z'; b++) {
				list.add("" + a + b);
			}
		}
		
		ComboBox<String> comboBox = new ComboBox<>("ComboBox AA..ZZ");
		comboBox.setItems(list);
		
		return comboBox;
		
	}
	
	public ComboBoxBugView() {		
		add(new TextField("Before"), createStringComboBox(), new TextField("After"));
	}
	
}

[tulioag]

Hi @guttormvik. Since this issue has been closed for some time, would you mind creating a new issue linking this one?

[guttormvik]

Hi @tulioag, not sure. I was asked to comment on the old issue by @rolfsmeds