如何让MUI Select默认滚动至列表中心且初始为空？

要实现MUI Select初始为空，点击下拉时滚动条默认定位到列表中心（比如让值为100的选项居中），可以通过以下步骤实现：

核心思路 #

利用Select组件的MenuProps配置下拉菜单的行为，在菜单打开后，找到目标选项元素，计算并设置滚动容器的滚动位置，使目标选项处于可视区域中心。

代码实现 #

import React, { useState, useRef } from 'react';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

const CenteredSelect = () => {
  const [selectedValue, setSelectedValue] = useState('');
  const [menuOpen, setMenuOpen] = useState(false);
  const menuListRef = useRef(null);
  // 目标值，这里设置为100
  const targetValue = '100';

  const handleOpen = () => {
    setMenuOpen(true);
    // 延迟执行确保菜单元素已渲染完成
    setTimeout(() => {
      if (menuListRef.current) {
        const targetItem = menuListRef.current.querySelector(`[data-value="${targetValue}"]`);
        if (targetItem) {
          const menuList = menuListRef.current;
          // 计算滚动位置，让目标元素居中显示
          const scrollTop = targetItem.offsetTop - (menuList.clientHeight / 2) + (targetItem.clientHeight / 2);
          menuList.scrollTop = scrollTop;
        }
      }
    }, 0);
  };

  const handleClose = () => {
    setMenuOpen(false);
  };

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };

  // 生成示例选项列表：10到190，步长10
  const options = Array.from({ length: 19 }, (_, i) => (10 + i * 10).toString());

  return (
    <Select
      value={selectedValue}
      onChange={handleChange}
      onOpen={handleOpen}
      onClose={handleClose}
      displayEmpty
      renderValue={(selected) => selected || '请选择'}
      MenuProps={{
        PaperProps: {
          sx: { maxHeight: 200 }, // 设置菜单最大高度，确保滚动条出现
        },
        MenuListProps: {
          ref: menuListRef,
        },
      }}
    >
      {options.map((value) => (
        <MenuItem key={value} value={value}>
          {value}
        </MenuItem>
      ))}
    </Select>
  );
};

export default CenteredSelect;

关键说明 #

• displayEmpty：配合renderValue实现未选择时的空状态显示。
• MenuProps.MenuListProps.ref：获取下拉菜单的滚动容器DOM节点，用于控制滚动位置。
• 延迟执行逻辑：菜单打开后DOM需要渲染时间，用setTimeout确保能正确获取目标选项元素。
• 滚动位置计算：通过目标元素的偏移量，结合容器和元素自身高度，计算出让元素居中的滚动距离。

内容的提问来源于stack exchange，提问作者Darpek