Adding items on top when scrolled down is not working correctly.

[MikaelUlvesjo]

I'm submitting a bug report

• Library Version:
  1.0.0-beta.3.0.1

Please tell us about your environment:

• Operating System:
  Windows 7
• Node Version:
  6.2.1
• NPM Version:
  3.9.3
• JSPM OR Webpack AND Version
  JSPM 0.16.45
• Browser:
  all
• Language:
  all

Current behavior:
When adding items to the top of the list while scrolled down a few pages the list in view will be pushed down and no items will be rendered so you will have an empty list.

To reproduce use the sample in this project:
1: in sample\src\phone-list.html replace

<div class="array-actions">

with

<div class="array-actions" style="position: fixed;">

2: Open the phone-list sample page in a web-browser

3: scroll down a few pages

4: click "Add 1 at top" a few times and the list should be gone.

Expected/desired behavior:

• What is the expected behavior?
  The currently displayed items should not be pushed out of view but the scrollbar should indicate that the list have increased in size OR the list is pushed down and items further up the list is displayed.
• What is the motivation / use case for changing the behavior?
  Lists that have new items added first do not work when scrolled down.

[paulclijsters]

I'm running into the same problem.

After diving into the code, it seems to be a problem when handling added splices in array-virtual-repeat-strategy. In case hasDistanceToBottomViewPort is true, the item is always added, and maybe removed again. When disabling this check (by setting it to false), it seems to fix the problem and the available unit & integration tests are still succeeding.

This condition is introduced in commit 6038310. I'm unfortunately unable to determine what the desired behavior is, and therefore unable to come up with a correct fix.

Can someone elaborate on the desired behavior / which scenario this check is applicable?

[MikaelUlvesjo]

The items in view should stay in view even if new items are added above, the only indication of the list change is that the scrollbar should move and be resized.

[MikaelUlvesjo]

We have tested the fix, the original issue seems to be resolved.
But a new one has been found, and comparing to the master branch your fix have made i worse.
The new problem is that if items are added while scrolling up the list will start to have empty elements.

To replicate the problem add a new button which toggles continues feeding of elements to the list.
Easiest to replicate when scrolling to the bottom of the list and slowly scrolling up.

e.g:

toggleFeed(toggle = true) {
   if(toggle) {
     this.isFeedActive = !this.isFeedActive;
   }
   if(this.isFeedActive) {
     this.addItemLast();
     setTimeout(() => { this.toggleFeed(false); }, 500);
   }
 }

[altenstedt]

I am having this issue as well, or a variation of it. I have spotted an error in the code, but I do not understand enough of it to provide a fix.

In array-virtual-repeat-strategy.js, function _inPlaceProcessItems, line:

let first = repeat._getIndexOfFirstView();

does not work when the input items array has been reduced in size. Variable first is used to access elements the items array, but if you have reduced the number of items in the array that we repeat on, this will access items outside the bounds of the array.

for (let i = 0; i < viewsLength; i++) {
    ...
    let something = items[i + first]

How can I help? This module is very useful, and I would like to help get this issue resolved.

[AStoker]

Resolved (hopefully) by #107