[ScrollArea] `asChild` on `Viewport` is not working correctly

[benoitgrelard]

Bug report

When using asChild on Viewport, the functionality is lost.
This is probably due to the fact that there's an extra node around children.
I think the solution is to use Slottable probably.

Reproducible example

https://codesandbox.io/s/scrollarea-viewport-aschild-bug-y46g5q?file=/App.js

Suggested solution

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)
React	n/a
Browser
Assistive tech
Node	n/a
npm/yarn
Operating System

[exah]

I think we can remove the additional div when the asChild prop is used and rely on implementation in userland. It will allow adding scroll-snap-type wrappers inside, for example.

UPD: It will not work, as I see in the code now, the div used to measure content size.

[deltasierra96]

Any updates on this issue?

[gwu]

I just ran into this issue because I'm using https://www.framer.com/motion/ to animate some elements inside the viewport of a ScrollArea, and in order to allow Framer Motion's automatic "layout" animations within scrollable containers, the scrollable container (in this case, the ScrollArea's Viewport) needs to become a <motion.div> instead of a plain <div>.

[finkrer]

@benoitgrelard I have just encountered this issue. This is due to the fact that when the viewport, which has overflow: scroll, is merged with the children wrapper, which has display: table, the resulting element has both display: table and overflow: scroll.

The problem here is that overflow does not work with display: table elements, so scrolling doesn't work.

Maybe it would be possible to remove display: table, it's not a table after all.

[benoitgrelard]

Hey @finkrer we may do this, it's related to #926