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.
Context
New prop in
<Select />component to control the scrolling behavior. Could be named something likescrollToHighlightedOption: booleanSummary
Currently, the Select component auto scrolls to the highlighted option on every re-render. And this can't be disabled from the outside.
Having a new prop should allow parent components to disable this.
Justification
In MasteryConnect we managed to use the
Selectcomponent 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
Selectcomponent triggersscrollToOption, and the list jumps back.https://github.com/instructure/instructure-ui/assets/703405/ee309593-ffab-4f2f-9439-b0820a79b893