[combo-box] Focused item does not always get scrolled into view

[web-padawan]

Description

In combo-box scroller, there is a logic to adjust scroll position so that focused item always remains in the viewport: https://github.com/vaadin/web-components/blob/5ddcd5872e4b1ace47bf98b3efd8e0fdb831f050/packages/combo-box/src/vaadin-combo-box-scroller.js#L208-L211

For some reason (maybe due to refactorings done for Vaadin 22 and later) this does not always work:

https://user-images.githubusercontent.com/10589913/173547247-75aed411-615d-4541-b536-ecba735a1c42.mp4

Note: this happens much often when item heights are different (in this case, some countries are too long and wrap in 2 lines).

Expected outcome

Focused item should always get scrolled into view when pressing Arrow Down

Minimal reproducible example

<vaadin-combo-box label="Country"></vaadin-combo-box>

<script>
  const comboBox = document.querySelector('vaadin-combo-box');

  comboBox.dataProvider = (params, callback) => {
    const xhr = new XMLHttpRequest();
    xhr.onload = () => {
      const response = JSON.parse(xhr.responseText);

      // Emulate network latency for demo purpose
      setTimeout(() => {
        callback(response.result, response.size);
      }, 100);
    };

    const index = params.page * params.pageSize;
    xhr.open(
      'GET',
      `https://demo.vaadin.com/demo-data/1.0/filtered-countries?index=${index}&count=${params.pageSize}&filter=${params.filter}`,
      true,
    );
    xhr.send();
  };
</script>

Steps to reproduce

1. Open the dropdown, wait for items to load
2. Select a country (the dropdown will close)
3. Open the dropdown once again
4. Press Arrow Down several times

Environment

Vaadin version(s): Vaadin 23.2 (master) - haven't tested older versions yet

Browsers

Issue is not browser related

[LarsGraeve]

Let me add my observations.

Sudden jump to first combo box item My combo box uses a data provider that provides >400 items. When opening the combo box by arrow down key the focus lays on the first item. Further arrow down key hits go to 2nd, 3rd,... item. Reproduceable (after page refresh) on the 29th entry, the next arrow down does not focus the 30th item, but the focus is lost. Next arrow down focusses the 1st item (and item list is scrolled to top). When I go on, arrow down key strokes bring me to item no. 79, on next stroke the focus got lost, next jumps back to item no. 1. In the third loop I can reach item 129. And so on. With every loop I can go deeper (each time plus 50 item - which is the page size)

Depends on browser zoom factor When zooming in, the sudden jump is done later. For instance, with zoom factor 160% I can reach items 37, 87, 137 etc. before jumping to item 1; with zoom factor 300%: items 46, 96, 146. When zooming out - now the maximum height of the combo box item list is less then the docuement height -, the sudden jump is made when reaching the visible end of the items list.

Depends on data provider There is no such a strange behaviour, if items are provided "hard-coded" by items property of the combo box instead of using a data provider.