[BUG] Layout issues using useWindowScroll and a header component

[blynx]

Describe the bug

When using a Header (via components prop) in a Virtuoso composition and switching useWindowScroll to true, will cause layout issues as seen in the linked codesandbox:

In the initial state, the first group header will be directly sticky and at the top of the box instead of the desired global header. The global header is covered by the first group header.

Reproduction

https://codesandbox.io/p/sandbox/practical-sid-pwywgc

To Reproduce

• Build a basic grouped Virtuoso composition
• add a Header (via components prop)
• set useWindowScroll to true

[petyosi]

You don't need to set header or footer components if you're using window scroll, just add regular elements before/after the component.

The sandbox does not seem to be saved, or I don't get it - it's a regular grouped virtuoso.

[blynx]

Sorry! I pasted the wrong link here. This one should be the correct link. (also edited the original post)

https://codesandbox.io/p/sandbox/practical-sid-pwywgc

What you suggest is also my fix for now, prepending—or kind of shimming—an element before the actual list. But thats just a fix, as this item is not of the same kind as the rest of the collection items. So this is not quite the clean solution and I still think Virtuoso does not work as expected here.

[petyosi]

The link works now, but I'm not sure what you're trying to achieve though. What would the correct behavior?

[blynx]

I would expect something like this, this is the composition with useWindowScroll=false:

(You can try it also in the codesandbox, I just took the screenshots from there)

This is with useWindowScroll=true:

There is whitespace (especially at the top), which is not supposed to be there, the header is below the first group heading, etc.

From looking into the resulting markup I get the feeling that Virtuoso extracts the wrong element to put it into the heading position or something like that. Can't adequately describe whats happening, but I get the feeling theres something unintended going on.

[petyosi]

I agree that something is not correct, mainly because I believe that having a header component in that mode accomplishes nothing that you can't do by placing the header outside - like this. But I might be missing something. I am not sure I understand this part from your previous post:

as this item is not of the same kind as the rest of the collection items.

The header itself does not include an item?

[blynx]

True,
though using Virtuoso this way saves some repetitive markup. But it would work just fine as you suggest.

Ah, not quite: I am switching between useWindowScroll=true/false and putting this item just before the Virtuoso block wouldn't scroll it away when useWindowScroll=false.

The header itself does not include an item?

It has markup, it's a mix of the lists group heading and some "other item" which is not really part of the collection of the entity.