search

petyosi / react-virtuoso

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

[BUG] Items list is not loaded when using createPortal and window.open (Chrome) #999

Open HovhannesB opened 10 months ago

HovhannesB commented 10 months ago

Describe the bug When I open a new window and add Virtuoso with createPortal, virtuoso-item-list is empty. I could reproduce this issue on Edge, Chrome. Firefox works ok. The browser should be maximized. (window.open should open a new tab and focus it instead of popup)

Reproduction https://codesandbox.io/s/beautiful-kate-ftj8jl?file=/src/App.js

To Reproduce Steps to reproduce the behavior:

  1. Go to https://codesandbox.io/s/beautiful-kate-ftj8jl?file=/src/App.js
  2. Maximize Chrome
  3. Press "Click Me"
  4. You'll see a new tab with "Virtuoso List" text in it
  5. Go back to codesandbox tab and again open the opened tab
  6. You'll see the populated list

Desktop (please complete the following information):

Additional context I tried to find the cause of the issue (really interesting case for me) and the issue was connected to ResizeObserver. As far as I understand (not in Firefox this time 😄), ResizeObserver doesn't work when the element is not visible or maybe the tab is not visible. I added callback(elRef) at line 25 and it started to work.

https://github.com/petyosi/react-virtuoso/blob/12e53e5d75a728dbddbb908aad70b6d9674f459e/src/hooks/useSize.ts#L12-L26

petyosi commented 10 months ago

Now that's a fun case! First time I see a portal in another window. My gut feeling says that maybe the resize observer from the first window is not working in the other one? Since you've already investigated that, I'm happy to accept a PR.

HovhannesB commented 10 months ago

I did other change which I missed in the description. I also commented requestAnimationFrame which are not working when the tab is inactive. I'll try to uncomment requestAnimationFrame and find another way.

paulincai commented 10 months ago

@petyosi I was not sure whether I should open a new issue. I use Virtuoso 4.6.0 in a div all works fine and it did work ok for a long time on previous versions. When I update the package to 4.6.2, development works ok however the production build doesn't show any items. Revert back to 4.6.0, all ok.

petyosi commented 10 months ago

@paulincai Is this related to this issue? Not sure I follow.

paulincai commented 10 months ago

@petyosi I wouldn't know whether this is related to the same issue. Would be interesting to know if the issue above exists in 4.6.2 and similarly not in 4.6.0. Later ... ok, I think the issues are not related.

HovhannesB commented 10 months ago

@paulincai this issue exists even in 1.5.3 version (I didn't tested with earlier versions).