Material ui select move the scroll to top if all items are selected

Question

I use material ui select and I noticed that when I select all items, close the select and reopen it again, the position of the scroll is moved to the end, is there any way to keep it at top?

current behavior:

expected behavior:

I looked for all options presented in the api but no one of them helped, my idea is to get the DOM element directly and apply element.scrollTo=0

Answer 1

This issue is that material-ui's autoFocus goes to the last item by default. I couldn't get it to work differently unfornately (it seems torevolves around playing with tabIndex in the Paper element of the list). However what you can do is disable the focus all together:

<Select ... MenuProps={{autoFocus: false}} >
   ...
</Select>

The pitfall of this approach is that whenever you open the menu, it'll always focus on the 1st item of the list, even though only the last item was selected.

example: https://codesandbox.io/s/material-demo-yv5vg