Assertion Failed: targetValue must be greater than or equal to 0

[ghost]

Hello, if I use vertical-collection with such Array like: [{ name: 'Benas', id: 1}] which contains object I get this error: Assertion Failed: targetValue must be greater than or equal to 0. I tested and if I only pass Array it works perfectly.

[pzuraq]

Can you add the template you're using VC with? The error you're seeing means that an invariant with the SkipList, the dynamic list measurement store, has been violated. For some reason, it's trying to find the item at a negative value - above the scroll container.

This generally means something is wrong with the template or estimateHeight, but lots of bugs can cause this so we'll need more information to figure out what's going on.

[panthony]

I just encountered the same issue.

I'm using vertical-collection to display a filterable list of items, If the filter results in 0 items then this error is triggered.

It goes away if I add staticHeight=true unfortunately for some reason at initial render it does not render the last row that would be partially visible which gives the feeling that this is the end when it's not.

[pzuraq]

@panthony are you still rendering items? VC shouldn't have issues with no items, but it has had issues with items that are 0 height.

[panthony]

@pzuraq Not sure I'm following what you mean by "still rendering items" in the context where there are no items to render due to being filtered out.

The following didn't work for me:

{{!-- items = [] --}}
{{#vertical-collection items staticHeight=false estimatedHeight=216 as |item|}}

{{/vertical-collection}}

Maybe passing an empty array trigger the same error as when one of the item as a height of 0?

[pzuraq]

We've had users before who said they were filtering items, but were doing something like:

{{#vertical-collection items as |item|}}
  {{#if item.isShowing}}

  {{/if}}
{{/vertical-collection}}

Which resulted in a bunch of "hidden" items. VC doesn't expect this, and should be able to handle it but doesn't in some cases at the moment.

We currently use VC with empty arrays, so I'm wondering if something else is going on here.

[panthony]

@pzuraq Tried to reproduce the issue to give more details but I couldn't.... Not sure what failed the first time...

I'll put this in my cosmicray box. Sorry for wasting your time :)

[danielspaniel]

This is definitely an issue. It comes up when there is no computable height on a "row" that VC is iterating on. So if staticHeight=true that fixes it because there needs no computation of height. The strange thing is that VC can't calculate a height on a component that has a plain div with no style wrapping it. That seems like the bug.

VC thinks the height of

<div>blah</div> 

is -> 0 but it is around 20px ( technically )

The solution is to add a min-height to the div style or in the stylesheet.

[pzuraq]

@danielspaniel can you post a reproduction? VC actually measures the elements themselves, so if the item has any height (manually applied or not) it should be measured correctly. We've also been making changes to support zero-height items in general as possible, any examples we have that trigger this bug would really help out.

[danielspaniel]

Hi Chris, I tried to make a twiddle but that does not accept vertical collection as an addon .. oh well.

The simple way to reproduce it is to do this:

 {{#vertical-collection
        products
        staticHeight=false
        estimateHeight=100
        bufferSize=1
    as |product|}}
      {{my-product product=product}}
    {{/vertical-collection}}

products could be an array of whatever, and the my-product component is just a component with no style ( but it does get wrapped with html <div class="ember-view">

That should hopefully blow things up nicely for you

[Jamesiebondco]

I also ran into this issue. Seems to be that if the {{my-product}} component has any styling that has position set. position: relative for example. That issue will occur.

[dwickern]

I get this error when I place a vertical-collection inside another one.

Error: Assertion Failed: targetValue must be greater than or equal to 0
    at new EmberError (http://localhost:4200/assets/vendor.js:41496:23)
    at Object.assert (http://localhost:4200/assets/vendor.js:40335:27)
    at SkipList.find (http://localhost:4200/assets/vendor.js:63286:45)
    at DynamicRadar.get firstVisibleIndex [as firstVisibleIndex] (http://localhost:4200/assets/vendor.js:63682:37)
    at DynamicRadar._shouldScheduleRerender (http://localhost:4200/assets/vendor.js:63602:53)
    at _nextIncrementalRender.schedule (http://localhost:4200/assets/vendor.js:63489:20)
    at Array.execJob (http://localhost:4200/assets/vendor.js:86339:9)
    at Scheduler.flush (http://localhost:4200/assets/vendor.js:86399:15)
    at _nextFlush.requestAnimationFrame (http://localhost:4200/assets/vendor.js:86385:14)

Reproduction here https://github.com/dwickern/nested-vertical-collection-repro

I suspect it's treating the hidden element as a 0-height div rather than using the actual height if the item were in the viewport.

[nwhittaker]

I ran into this error when my <VerticalCollection> element was inside the shadow DOM of a custom Web Component (specifically Stencil).

The height was being computed before the web component was fully hydrated which resulted in these lines resolving top and bottom to 0: https://github.com/html-next/vertical-collection/blob/fcd3e96de8384e81c84c7b965abdc765fe5f23c4/addon/-private/data-view/elements/virtual-component.js#L54-L55

If I wait for the web component to hydrate before inserting the <VerticalCollection> mark-up, the heights are computed as expected.

[jmmorganMSTS]

I ran into this issue recently while adding an ember-table inside a tabbed interface (from ember-bootstrap). When vertical-collection is rendered inside a div that is display: none it triggers this error.