YouneL
YouneL

Reputation: 8351

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

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:

enter image description here

expected behavior:

enter image description here

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

Upvotes: 6

Views: 5895

Answers (1)

Christopher Chiche
Christopher Chiche

Reputation: 15325

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

Upvotes: 15

Related Questions