search

petyosi / react-virtuoso

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

[BUG] children components of VirtuosoGrid get unmounted when navigate on Ionic5 #669

Closed 21hak closed 2 years ago

21hak commented 2 years ago

Describe the bug Children elements of VirtuosoGrid get unmounted when navigate to other page using Ionic router. This only happens when custom scroll element is passed to customScrollParent props. As children components are unmounted, scroll moves to top which causes problems.

Reproduction https://codesandbox.io/s/pedantic-dirac-5lhh7k?file=/src/pages/ListPage/ListPage.tsx

To Reproduce There are 4 cases. Virtuoso with/without custom scroll element and VirtuosoGrid with/without custom scroll element.

Steps to reproduce the behavior:

  1. Go to ListPage.tsx
  2. Check each case. Each case is comment out.
  3. Scroll down several times and route to DetailPage by clicking a link. Then, go back to ListPage by clicking header back button.

Expected behavior Items should not be unmounted after coming back to list page. Virtuoso and VirtuosoGrid without custom scroll element works as expected. Only when custom scroll element is passed to VirtuosoGrid customScrollParent props, Items are unmounted and scroll position is set to top.

Desktop (please complete the following information):

Additional context Add any other context about the problem here.

petyosi commented 2 years ago
  1. There's something wrong with the sandbox: image
  2. I have no experience with Ionic and his underlying navigation. Can you help me by reproducing the problem outside of it?
21hak commented 2 years ago

Sry, I forgot to save😂 . Here's the link. https://codesandbox.io/s/compassionate-williamson-20b6gl?file=/src/pages/ListPage/ListPage.tsx I'll reproduce without ionic. Thank you

21hak commented 2 years ago

Hi! I made a quick reproduction. I think this happens when the display property of container element changed to none. https://codesandbox.io/s/small-cherry-zzobtx?file=/src/App.tsx

petyosi commented 2 years ago

Got it. There's a guard condition for that in the list but not in the grid, should be an easy fix.

github-actions[bot] commented 2 years ago

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

The release is available on:

Your semantic-release bot :package::rocket: