Shuffled tabindex in virtual scroll

Ionic Framework Ionic Angular
1

Hi all,

I’d like to question something regarding the order of elements in a list when using virtual scroll. I’m not sure whether it’s a bug or I am doing something wrong.

If you have a virtual list like this:

<ion-virtual-scroll
  [items]="filteredEmployees"
  approxItemHeight="48px"
  [trackBy]="trackByEmployeeId"
>
  <ion-item *virtualItem="let employee">
    <ion-label>{{ employee.name }}</ion-label>
    <ion-checkbox slot="start"></ion-checkbox>
  </ion-item>
</ion-virtual-scroll>

everything works as expected. Notice that each item is a clickable form element. But when you scroll a bit, and the list items are added/removed dynamically, it messes up the order of them in the DOM and navigating using the keyboard (tab key) doesn’t work as expected.

Let’s say that when pressing the tab key you expect the items to be selected in the natural top-to-bottom order:

…
33
34
35
36
37
…

but the actual order is shuffled:

…
33
36
37
34
35
…

Is this a bug or am I missing something? Has anybody else noticed and experienced this issue?

Looking very much for any response.

   Ionic CLI                     : 6.10.1 (C:\Users\joskr\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.2.3
   @angular-devkit/build-angular : 0.1000.2
   @angular-devkit/schematics    : 10.0.2
   @angular/cli                  : 10.0.2
   @ionic/angular-toolkit        : 2.2.0