[SelectField] Scroll wheel event bubbling to parent container

[oskar-koli]

Problem Description

When a user scrolls down a long dropdown menu to get to the bottom, they will usually scroll the mouse wheel much more then necessary just to get to the bottom quickly. The problem with the current implementation is that once the user hits the bottom of the list, the scroll wheel events will bubble up to parent containers, possibly causing the whole page to scroll. This is not a good user experience, reducing the velocity at which users navigate the site and causing frustration. Instead, once the bottom of the list is hit, scrolling the mouse wheel further down shouldn't scroll anything until the user moves the cursor off the SelectField.

I'd propose a "scrollLock" boolean prop (defaults to false) to be added to the "Menu" component (where the scrollable div is), which when set to true stops bubbling of scroll wheel events similarly as seen here. I can do the implementation and make a pull request, but I wanted to get some feedback on this before I begin :)

Versions

• Material-UI: 0.15.0-beta.2
• React: 15
• Browser: Google Chrome 50

[tintin1343]

This sounds reasonable. I would like the other collaborators to also comment on this.

[mbrookes]

I guess ideally scroll-lock should always be the behaviour when the menu is scrollable, rather than requiring a prop, i.e. if maxHeight < children.length * menuItemHeight.

menuItemHeight is the tricky part, as the user may have styled it differently to the default.

[tintin1343]

@Havdon : Feel free to submit a PR. Thanks!