[ScrollArea] Handle visibility change and nesting

[atomiks]

When using ScrollArea inside Select, all the wrappers need role="presentation" to not interfere with the listbox role.

Further, the thumb was not computed when the ScrollArea became visible, and incorrectly reset the scrollbar offset if it had no width/height (such as on hide/unmount).

https://deploy-preview-1598--base-ui.netlify.app/experiments/scroll-area/inside-select

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	7c31bf9
🔍 Latest deploy log	https://app.netlify.com/sites/base-ui/deploys/67fd082c68a6470008665c85
😎 Deploy Preview	https://deploy-preview-1598--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[michaldudak]

There's an issue when the viewport is resized while the Select is open. Once the viewport edge reaches the thumb, the native scrollbar appears.

select-scroll.mov

[atomiks]

@michaldudak updated - looks like that's just because overflow-y: auto is on .Popup in the experiment, but should be removed when using ScrollArea inside of it

[michaldudak]

Now the scrollbar appears on the viewport:

bad.mp4

(https://codesandbox.io/p/devbox/determined-cache-rm6n4x?file=%2Fsrc%2FApp.tsx&workspaceId=ws_QAeLcZEcDnfGaFA47etEUH)

Instead of recalculating the thumb position:

good.mp4

(https://codesandbox.io/p/sandbox/hopeful-babycat-nvh9pq?file=%2Fsrc%2FApp.tsx)

[atomiks]

@michaldudak I can't repro the first one on macOS with the scrollbars always visible setting - is it also visible on the current v1.0.0-alpha.7?

Second one, I can

[michaldudak]

The second video shows alpha.7

[atomiks]

@michaldudak Oh right, I thought you meant it was a second issue not recalculating the position. But it seems like they're related: because it doesn't recalculate the position it overflows the bottom and causes the main scrollbar to appear. Seems like that's due to the Content part being removed by default, and the ResizeObserver ends up bailing out of both the viewport and content nodes

[michaldudak]

Sorry I wasn't clear enough! It seems to work well now. I'll do a final pass of the implementation now.