Scrolling quickly to the bottom of the dropdown shows blank items

[johannesh2]

Description

Scrolling a lazy loading combo box to the bottom of the result sets shows blank dropdown. Scrolling back up a bit, reveals the items.

Code

import java.util.ArrayList;
import java.util.Optional;
import java.util.stream.Stream;

import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.data.provider.Query;
import com.vaadin.flow.router.Route;

@Route("lazycombo")
public class LazyCombo extends VerticalLayout {
  static final ArrayList<String> list = new ArrayList<>();
  static final int MAX_ITEMS = 500;
  static {
    for (int i = 1; i <= MAX_ITEMS; i++) {
      list.add(String.valueOf(i));
    }
  }
  
  public LazyCombo() {
    ComboBox<String> combo = new ComboBox<>();
    combo.setItems(this::items);
    add(combo);
  }
  
  private int count(Query<String, String> q) {
    int count = (int) filteredItems(q).count();
    return count;
  
  }
  
  private Stream<String> items(Query<String, String> q) {
    return filteredItems(q).skip(q.getOffset()).limit(q.getLimit());
  }
  
  private Stream<String> filteredItems(Query<String, String> q) {
    return list.stream().filter(item -> doFilter(item, q.getFilter()));
  }
  
  private boolean doFilter(String item, Optional<String> filter) {      
    if (filter.isEmpty()) {
      return true;
    } else {
      return item.contains(filter.get()); 
    }
  }
}

Gif

Tested with V18 beta2. On Win 10 Chrome 86

[mshabarov]

This happens when you drag and scroll sharply. Apparently, 2-3 last pages are not requested from backend and, thus, rendered.

This video shows two cases: with sharp scrolling and with smooth scrolling. All the pages are fetched in second case.

https://drive.google.com/file/d/1EtyuPIXFifKKuawuCslORf9aspp5pFBP/view?usp=sharing.

Proceed with investigation.