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

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.

[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.

[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