When the user opens `select`, and scroll, the screen will move.

Bugs

What MDC-Web Version are you using?

v0.14.0

What browser(s) is this bug affecting?

All browsers

What OS are you using?

Windows 10

What are the steps to reproduce the bug?

https://material-components-web.appspot.com/select.html

What is the expected behavior?

When the user opens select, the body’s scroll bar should not be scrolled.

What is the actual behavior?

When the user opens select, and scroll, the screen will move.

Any other information you believe would be useful?

Ref: https://material.angular.io/components/select/overview

[aeon0]

I tried it on Linux and finally understand the behavior you describe. There are just two main differences to the current mdc-select behavior:

1. The scrolling is locked, but the scrollbar is not hiding. With overflow: hidden, the scrollbar hides and then shows again which results in these ugly jumps of page width
2. The current mdc-select only locks scrolling on the body. If the mdc-select is inside another scrollable parent it doesn’t work anymore.

Just things to keep in mind.

[aeon0]

Hmm. I think for the time being, it would be much easier to mimic the default behavior on Windows where the select menu closes when you scroll outside of the menu opposed to the default Linux behavior (see discussion with @Garbee). So, listening to the onScroll event when the cursor position is outside of mdc-select__menu, I would close the select menu. Or maybe it is included in the event which element is scrolled, I am not sure right now. Opinions on that? Thanks a lot for taking the time!