scrolling to the bottom fails with TypeError: Cannot read property 'instruction' of undefined

[Thanood]

I'm submitting a bug report

• Library Version:
  1.0.0-beta.3.0.0

Please tell us about your environment:

• Operating System:
  Windows 8

• Node Version:
  6.2.2

• NPM Version:
  3.10.5

• JSPM OR Webpack AND Version
  JSPM 0.16.15

• Browser:
  all

• Language:
  all

Current behavior:

When scrolling down to the bottom of a list, the following exception is thrown:

Uncaught TypeError: Cannot read property 'instruction' of undefined
executeGetMore @ virtual-repeat.js:334
...

I did not use infinite-scroll-next in my app but is seems to be expected at this line.

let func = (this.view(0) && this.view(0).firstChild.au) ? this.view(0).firstChild.au['infinite-scroll-next'].instruction.attributes['infinite-scroll-next'] : undefined;

Expected/desired behavior:

• What is the expected behavior?

Scroll a list to the bottom and don't get any errors while doing that. 😄

• What is the motivation / use case for changing the behavior?

I'd like to display a selectable list of users. There may be a few hundreds of them so I'd like to use virtual repeat.

[AStoker]

@Thanood, this should have been caught by tests (should have, but isn't 😉). Sorry that was slipped in there. I'll get a PR in to fix this ASAP.
Just curious, how are you scrolling to the bottom of the container?

[Thanood]

@AStoker I use the mouse. 😄
I mean, manually and no mouse wheel or anything, I just move the mouse to the bottom and release the mouse button.

I think this also happens when setting scrollTop but I did that only once.

[AStoker]

@Thanood, what does your DOM look like? I just tried to reproduce this error, and couldn't get it to happen? I have an idea, but want to confirm what could be going down.

[Thanood]

@AStoker I can post the DOM tomorrow since it's on my computer at work.
You do mean the DOM after virtual-repeat is active, right?

[AStoker]

@Thanood, in particular, the elements that are repeating. are there any additional bindings on them? For normal elements like:
<div virtual-repeat.for='item of items'>${item}</div>, it shouldn't break because the check looking for infinite-scroll is short circuited before it gets there (it stops checking after seeing if au is on the element, which it isn't).
My thought is that maybe if there are additional bindings happening here, it would then break.

[Thanood]

@AStoker There are actually two lists in which this happens.

Here's the user selection:

      <mdl-list-item virtual-repeat.for="user of users | filter:['firstName', 'lastName']:filter | selected:'_isSelected':showOnlySelected" class="${ user._isSelected ? 'selected' : '' }">
        <mdl-list-item-primary>
          <div>
              <mdl-checkbox mdl-on-change.delegate="selectionChanged(user, $event.detail.value)" mdl-checked.two-way="user._isSelected"></mdl-checkbox>
          </div>
          <div click.delegate="user._isSelected = !user._isSelected" class="user-selection__name">
            <span if.bind="user.firstName != '' || user.lastName != ''">
              ${user.firstName} ${user.lastName}
            </span>
            <span if.bind="user.firstName == '' && user.lastName == ''" style="color: red;">
              (kein Name)
            </span>
          </div>
        </mdl-list-item-primary>
      </mdl-list-item>

The value converters filter the array by search term and "show only selected". It's the same like in #60 but that shouldn't be a problem here, right? Nothing is filtered there. It worked with beta.2.0.0 btw.

[AStoker]

Okay, yah. The problem (which shouldn't be a problem) is the use of repeating a custom element. I just wanted to make sure it was that particular case, and not some other case that wasn't being caught.

[Thanood]

Great, thanks! 👍