Expose the Prop to Control Auto-scrolling in Select Component

[gromaco]

Context

New prop in <Select /> component to control the scrolling behavior.
Could be named something like scrollToHighlightedOption: boolean

Summary

Currently, the Select component auto scrolls to the highlighted option on every re-render. And this can't be disabled from the outside.

  componentDidUpdate() {
    this.props.makeStyles?.()

    // scroll option into view if needed
    requestAnimationFrame(() => this.scrollToOption(this.highlightedOptionId))
  }

Having a new prop should allow parent components to disable this.

Justification

In MasteryConnect we managed to use the Select component for handling virtual lists. For this purpose, the scrolling behavior should be controlled by the virtualization logic.

Additional Details

Here is the issue that it causes. When the last visible option is highlighted, and we start scrolling in the opposite direction(up), re-rendering the Select component triggers scrollToOption, and the list jumps back.

MC-UI-collections-EasySelect---Basic-.-Storybook.mp4