[ScrollArea] Viewport fixes #2945
Conversation
vladmoroz
requested review from
StephenHaney,
lucasmotta and
hadihallak
as code owners
| /** | ||
| * This is a helper function that is used when a component supports `asChild` | ||
| * using the `Slot` component but its implementation contains nested DOM elements. | ||
| * | ||
| * Using it ensures if a consumer uses the `asChild` prop, the elements are in | ||
| * correct order in the DOM, adopting the intended consumer `children`. | ||
| */ | ||
| function getSubtree( | ||
| options: { asChild: boolean | undefined; children: React.ReactNode }, | ||
| content: React.ReactNode | ((children: React.ReactNode) => React.ReactNode) | ||
| ) { | ||
| const { asChild, children } = options; | ||
| if (!asChild) return typeof content === 'function' ? content(children) : content; | ||
|
|
||
| const firstChild = React.Children.only(children) as React.ReactElement; | ||
| return React.cloneElement(firstChild, { | ||
| children: typeof content === 'function' ? content(firstChild.props.children) : content, | ||
| }); | ||
| } | ||
|
|
There was a problem hiding this comment.
We worked this out in radix-ui/themes#311
|
Any progress on this? I just hit this issue today... |
|
Any progress on this too... |
|
Same here, have tmp fix, but need proper |
|
thank you so much folks 🙏 |
Code changes probably required after fix caused a regression: ~ radix-ui/primitives#2945
|
FYI this caused a breaking regression for us. .rt-ScrollAreaViewport>* {
width: 100%;
}but it doesn't seem very correct? Not entirely sure. |
|
I have the same issue as @kognise |
|
Reverted in 1.2.1 to fix the regression. Will revisit this at a later date. |
|
That's unfortunate, the removal of display table in this pr fixed other things, such as being able to properly use flexbox to dynamically size the scroll height, was relying on it. hopefully there's a way of bringing it back |
|
@Georgegriff I know. I'm planning to come back to this but I think the splash radius here for breaking apps is a little too big to justify in a patch release. We'll either re-release it in a major or adjust it to avoid breakage. Feel free to pin to 1.2.0 in the mean time. |
asChildprop not working as expected on the Viewport partdisplay: tablewith flex styles on the parent that allow the viewport to fill container height (based on the Radix Themes implementation)[data-radix-scroll-area-content]text-overflow: ellipsisnot working when used with a vertical scrollbarCloses #926 #1666