CustomValueSetListener not fired immediately

Hello everyone,

I’m using a combobox as an autocomplete field and I’ve noticed that the CustomValueSetListener does not fire immediately. When I type a new search term, it appears to use the previous one instead. How can I resolve this issue?

Thanks a lot

How do you access the newly added value?

ComboBox productField = new ComboBox<>(“Product”);
productField.setItemLabelGenerator(i → String.format(“%s : %s-%s”, i.getMaterial(), i.getName(), i.getDimensions()));

    productField.setAllowCustomValue(true);
    productField.setHelperText("Select or type a product");

    productField.addCustomValueSetListener(e -> {
        // this part is not fired immediately 
        String search = e.getDetail();
        productField.setItems(q ->
                productService.search(search, VaadinSpringDataHelpers.toSpringPageRequest(q))
                        .stream()
        );

    });

It should be fired once you submit the value with e.g. ENTER

After submitting the search term “coude”, it disappears. When attempting to enter a new search term, such as “T”, the search is still performed using the previous term “coude”.

If you can reproduce it with a simple example, it’s probably worth to create a ticket in the flow-components GitHub repo.

A combo box will clear its value when the data provider changes, which you do with the productField.setItems call.
It’s not really clear why you want to use a custom value listener for this, which requires committing the value. If you pull the productField.setItems call out of the listener you would automatically get the behavior you want: The user types something, and the combo box displays suggestions matching the typed input. If you don’t want to show any suggestions when there is no input, then modify your data provider (the lambda you pass to setItems) so that it returns an empty result if the filter in the query is empty.

Hi Sascha, I want the search results to be displayed in real-time as I type my search query. However, when I attempt to do this, the search is based on the previous query. I will try to reproduce the issue and share a GitHub repository."

This is the GitHub repository: https://github.com/hbellahc/autocomplete-combobox. The search feature in the ‘Search Book’ tab exhibits the issue I described. Thank you for your help.

Your code should look something like this:

ComboBox<SampleBook> comboBox = new ComboBox<>();
comboBox.setItemLabelGenerator(SampleBook::getName);
comboBox.setItems(q ->  {
    if (q.getFilter().isEmpty() || q.getFilter().get().isEmpty()) {
        return Stream.empty();
    } else {
        return bookService.search(q.getFilter().get(), VaadinSpringDataHelpers.toSpringPageRequest(q)).stream();
    }
});

layout.add(comboBox);

ComboBox will automatically call the data provider passed to set items when the user types something, no need to add a custom value listener for that.

Thank you for helping me find the exact behavior I was looking for.