search

petyosi / react-virtuoso

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

[BUG] List height does not update when items size changes *without* transitions #322

Closed cvle closed 3 years ago

cvle commented 3 years ago

Describe the bug Similar to https://github.com/petyosi/react-virtuoso/issues/314, the list height does not update as expected even when not using transitions.

Reproduction https://codesandbox.io/s/aged-resonance-evq3r

Workaround Adapted with rerender parent component approach see https://github.com/petyosi/react-virtuoso/issues/322#issuecomment-807428391 https://codesandbox.io/s/twilight-grass-12d1d

To Reproduce Steps to reproduce the behavior: Find Item e.g. 14, Click on expand and collapse again

Expected behavior The scrollbar should have disappeared when the list height has been updated accordingly.

Screenshots image

Desktop (please complete the following information):

petyosi commented 3 years ago

The issue you have referred to includes a sandbox which I created. Does it work when you test it? If so, use its approach.

cvle commented 3 years ago

Hi @petyosi! Thanks for your answer! Your sandbox actually shows the expected behavior. The only difference to your sandbox and mine was that yours would cause the Component that contains Virtuoso to rerender every time the height of an item changes.

I've adapted my sandbox example to call a custom rerender() to mimic this and then it works as expected. (https://codesandbox.io/s/twilight-grass-12d1d)

This seems to be a bug though, shouldn't Virtuoso be able to handle this without having to cause its parent component to rerender?

petyosi commented 3 years ago

Yes, it is a bug. I will look into it. A thing to notice though is that keeping state in the individual item is not a good idea. If you scroll beyond the current set of items, they will be unmounted, thus, their expanded state will be lost.

github-actions[bot] commented 3 years ago

:tada: This issue has been resolved in version 1.8.3 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

cvle commented 3 years ago

Thank you <3

chamerling commented 3 years ago

Great, this also fixes issue I was looking at when a sub component is lazy loading image with unknown height. Great job, thx for this 🍺