Выделите выбранный элемент списка в Material-UI

Question

У меня есть список, сборка с Material-UI. В нем много элементов, поэтому полоса прокрутки видна.

Я бы хотел прокрутить до выбранного элемента. Есть какие-нибудь идеи, как это реализовать?

Вот демонстрационная ссылка на sendbox

После нажатия на список элементов список должен выглядеть следующим образом (выбранный элемент находится в центре):

Answer 1

Удерживая ссылку на Списке , и при нажатии на ListItem вычислите, сколько вам нужно прокрутить, основываясь на:

1. высоте элемента списка
2. индекс выбранного элемента

3. количество видимых элементов списка.

   const scrollableListRef = React.createRef();
   
   function Row(props) {
     const { index, style } = props;
   
     const placeSelectedItemInTheMiddle = (index) => {
      const LIST_ITEM_HEIGHT = 46;
      const NUM_OF_VISIBLE_LIST_ITEMS = 9;
   
      const amountToScroll = LIST_ITEM_HEIGHT * (index - (NUM_OF_VISIBLE_LIST_ITEMS / 2) + 1) ;
      scrollableListRef.current.scrollTo(amountToScroll, 0);
     }
   
     return (
       <ListItem button style={style} key={index} 
       onClick={() => {placeSelectedItemInTheMiddle(index)}}>
         <ListItemText primary={`Item ${index + 1}`} />
       </ListItem>
     );
   }