Dynamically loaded content messes with display

[LorinIonita]

I have a list of items that dynamically re-renders based on a filter (it retrieves the data back from an API). When the list is small (e.g. 7 items in my case) and the filter brings back 1 item, going back to the 7 items list only renders 1 item (a regular list doesn't have this issue).

Do you have any idea how I can fix this?

[tangbc]

Sorry, I can't quite understand the filter brings back 1 item, going back to the 7 items list only renders 1 item means, can you explain more?

[LorinIonita]

Here is a code sandbox example
https://codesandbox.io/s/4w0xw8w514?fontsize=14

If you use the selectbox and select "two" it renders a list of 2 items. If you select "one" again, it doesn't go back to the 7 items. It just renders the first 2 items in the list.

I managed to fix it by adding a ref="list" to the virtual list and doing this.$refs.list.$forceUpdate(); after the items are returned from the api.

[tangbc]

I have reproduced it, thanks for reporting this.

[cchuang6]

I think the problem is if the number of remain plus the number of bench is greater than the data items, it will not re-render the list. I hot fix it by checking the size of the items is smaller than (remain + bench) and call forceUpdate if the condition is true.

Here is the hot fix example:
https://codesandbox.io/s/5yljv9548x

[tangbc]

@cchuang6 almost that, but vitrual-list shoud handle it itself, I will fix it in next version.

[tangbc]

Fixed and publish by v1.3.1.

But when change new list data, render zone start and end is still old and cannot know if this update come from new list or by scrolling, so call forceRender() after that is still necessary.