[Dialog][Popover] Scrolling issue when Popover inside Dialog

[hipstersmoothie]

Documentation

Relevant Radix Component(s)

Here in the docs it say to make Overlay a sibling to Content.

This setup doesn't work if you have a scrollable popover in the dialog content. On this line a ref is passed to RemoveScroll but I think that by using just a ref that RemoveScroll doesn't consider the portalled element a part of the react tree.

In my own code I fixed this by putting my Content inside of my Overlay. After this change my scrollable popover could scroll again since RemoveScroll now has access to the react tree.

[benoitgrelard]

Both compositions are valid, for different use cases.
In fact we have an example of a scrollable overlay here: https://www.radix-ui.com/docs/primitives/components/dialog#scrollable-overlay

[hipstersmoothie]

It's not overlay that I need scrollable though. I'll come up with a code sandbox to show what I'm talking about

[hipstersmoothie]

Here you can see if you follow all of the docs for both popover and dialog you can't scroll a popover in a dialog. I had to read through radix's source code and dependencies to figure out that I needed to wrap my content in the overlay. While both are valid I think the docs should steer people towards code+structure that will work out of the box without having to understand how the internals are actually working.

https://codesandbox.io/s/twilight-http-veu4gw?file=/App.js

[hipstersmoothie]

And if you're unwilling to change that I think the docs should at least detail why both composition are valid and what the use cases actually are.

[benoitgrelard]

Oh sorry I misunderstood what you meant!
That seems like a bug potentially, I'll take a look.

[jjenzz]

Hmm, yep looks like it could be a RemoveScroll shards thing 🙈 we need a ticket to create our own react-tree-aware remove scroll at some stage.