Why is scrolling disabled after expanding a select component?

[adatti]

I'm implementing a <Select/>, and it seems that when I click to expand it, the scrollbar disappears and I become unable to scroll the page, and just generally interacting with the page (clicking links, etc.) becomes impossible unless I first click outside the <Select/> to blur it.

I understand that this is intentional behavior, but can I remove or customize it? E.g. make it possible to scroll and interact with the page while the <Select/> is expanded?

[benoitgrelard]

Hey @adatti, you are right this is because currently Select doesn't offer the modal/non-modal modes and is instead hardcoded to being modal by default (unlike some other primitives which offer a modal prop to configure this).

The original reason for that was that the complex positioning behaviour specific to Select makes it very difficult to enable scrolling because we wouldn't know how to align it anymore when scrolled (that's why it's modal in MacOS too).

However, the recent addition of the position prop which now enables popper style positioning means that in this particular mode we should be able to bring in the modal prop. That hasn't been implemented yet but will be soon.

Hope that answers your question!

[adatti]

@benoitgrelard thank you.

In the meantime, is there a good alternative to <Select/> which does allow such interactions? I'm making a Reddit-style "all time / past week / past month" select for filtering top posts.

[benoitgrelard]

No, semantically and accessibility-wise, select is what you are after for this.