search

petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.25k stars 301 forks source link

Empty list on display changes #19

Closed GuillaumeAmat closed 5 years ago

GuillaumeAmat commented 5 years ago

When the parent element of Virtuoso changes its display mode from visible to hidden, the list is eventually empty.

I use @reach/tabs and all the TabPanel elements contain a Virtuoso list. If I repeatedly click on the tabs to hide and display my lists, one of them end to be empty.

I also tested by manually set/unset display: none on the parent and the result is the same.

Any idea?

Thanks for the great work by the way 👍

petyosi commented 5 years ago

This seems plausible given the resize observable logic. I tried to reproduce it in this example, but it seems to work fine, so perhaps I am missing something.

Can you fork the above so that I can reproduce it? Will take a look.

Cheers!

GuillaumeAmat commented 5 years ago

I can't reproduce the behavior on your sandbox, this is really weird... Though, when I scroll a list, Firefox complains (warning in the console) about a positionning effect related to the scroll state.

The french warning message is:

Ce site semble utiliser un effet de positionnement lié au défilement. Cet effet pourrait ne pas fonctionner correctement avec le défilement asynchrone. Consultez https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects pour obtenir davantage de détails ou discuter des outils et des fonctionnalités liés.

I don't if it is related but it could be.

petyosi commented 5 years ago

Thank you. Went through the article, the warning is more generic, and not related.

If you can deploy (or have deployed) your current setup somewhere, I can look at it. Perhaps there are other factors at play.

petyosi commented 5 years ago

@GuillaumeAmat - please ping me if you figure out something - I will re-open the issue. Thanks!

GuillaumeAmat commented 5 years ago

Sure, thank you for your time!

GuillaumeAmat commented 5 years ago

@petyosi I think I have a lead on that issue :)

I had a bit of time to test things here and there tonight and I figured this:

If I replace the following line: https://github.com/petyosi/react-virtuoso/blob/b39637592fd845cb964a0543c2df890f60c16fa1/src/OffsetList.ts#L125

...with: return this;

The behavior is fixed!

GuillaumeAmat commented 5 years ago

Picture this:

I have three tabs (@reach/tabs), each containing a Virtuoso list. All the items have the same height. In the first one I have 59 items, in the second I have 6 items and in the third one, I have 9 items. Each list displays 6 items without scrolling (the last one is cut though).

When I switch over tabs on and on, the previously displayed items are removed in all the lists.

So the second list is the first to be emptied, the third one contains 3 items (its last ones) and then is emptied as well. And the first list is emptied 6 items by 6.

GuillaumeAmat commented 5 years ago

Hey @petyosi, did you see my weird test? Could you consider reopening the issue?

petyosi commented 5 years ago

Hey @GuillaumeAmat - where is the test you refer to? Is there anything I can run on my side?

Apart from that, the change you refer to is not a feasible one, I am afraid.

GuillaumeAmat commented 5 years ago

Hey @GuillaumeAmat - where is the test you refer to? Is there anything I can run on my side?

No online test, it is just the result of a "quick, naive and dirty" search. I was just hopping to ring a bell on a possible cause of that issue.

Apart from that, the change you refer to is not a feasible one, I am afraid.

Yes of course, I wasn't asking that.