Combobox overlay issue with lazy loading

General
1

Hello, everyone.

I have problem with too big overlay of Combobox.
Vaadin version - 24.9.10
Steps to reproduce:

  1. type some letters in Combobox.
  2. leave the combobox
  3. click on combobox to focus it again.

Issue: big overlay appears.

I’ve tried to use cache to avoid heavy loadings, but seems the cause is different.

public class EmailSuggestionTextField extends ComboBox<String> {
    
    private final Supplier<List<String>> domainsSupplier;
    List<String> domains;
    List<String> values = List.of();
    
    public EmailSuggestionTextField(Supplier<List<String>> domainsSupplier) {
        this.domainsSupplier = Objects.requireNonNull(domainsSupplier);
        setClearButtonVisible(true);
        setAllowCustomValue(true);
        setAutoOpen(true);
        
        domains = this.domainsSupplier.get();
        setItems(query -> {
            String filter = query.getFilter().get();
            query.getLimit();
            query.getOffset();
            if(filter.isEmpty()) {
                return Stream.of();
            }
            return domains.stream().map(domain -> filter         + "@" + domain);
        });
    }
}

image
image349×842 7.53 KB

2

I would consider improving your backend to do the filtering.

3

Can you give 24.9.11 a try? There was a recent bugfix for a similar issue: fix: clear filter debouncer on connector reset by sissbruecker · Pull Request #8563 · vaadin/flow-components · GitHub

4

I’ve tried your solution. It Didn’t help ;(

5

I’ve modified my code slightly. It now utilizes a static list of domains.
However, the problem persists.

public class EmailSuggestionTextField extends ComboBox<String> {
    
    public EmailSuggestionTextField() {
        setClearButtonVisible(true);
        setAllowCustomValue(true);
        setAutoOpen(true);

        setItems(query -> {
            return getItems(query);
        });
    }
    
    private Stream<String> getItems(Query<String, String> query){
        String filter = query.getFilter().orElse("").trim();
        int offset = query.getOffset();
        int limit = query.getLimit();

        if (filter.isEmpty() || filter.contains("@"))
            return Stream.empty();
        List<String> domains = List.of("gmail.com", "yahoo.com");
        return domains.stream().map(domain -> filter + "@" + domain).skip(offset).limit(limit);
    }
}

I’m uncertain whether moving the logic further into the service layer would be beneficial.