MUI Select分组渲染时首次加载自动选中首个选项问题

问题重现 #

使用@mui/material ^5.10.8版本的Select组件，当通过<ListSubheader>对选项进行分组渲染时，即使将组件的value初始值设为空字符串，首次渲染仍会自动选中第一个选项；移除<ListSubheader>后，组件恢复正常工作。

相关代码 #

生成选项的逻辑：

const generateOptions = useCallback((options: ISelectOption[]) => {
  return options.map((opt, ind) => {
    if (opt.groupOptions) {
      return [
        <ListSubheader key={opt.label}>{opt.label}</ListSubheader>,
        opt.groupOptions.map((val) => (
          <MenuItem key={ind} value={val.value}>{val.label}</MenuItem>
        ))
      ]
    }

    return (
      <MenuItem key={ind} value={opt.value}>{opt.label}</MenuItem>
    )
  })
}, [options])

Select组件结构：

<FormControl fullWidth className="fb">
  <InputLabel id="select-label">{label}</InputLabel>
  <Select
    name={name}
    value={value}
    label={label}
    disabled={disabled}
    id="select-label"
    labelId="select-label"
    multiple={!!multiple}
    IconComponent={IconComponent}
    onChange={handleChange}
  >
    {generateOptions(options)}
  </Select>
</FormControl>

选项结构定义 #

interface ISelectOption {
  data?: any;
  label: string;
  className?: string;
  value: string | number;
  groupOptions?: ISelectOption[];
  renderOption?: (option: ISelectOption) => React.ReactNode;
}

示例选项数组 #

[
    {
        "label": "B2C campaigns",
        "value": "B2C campaigns",
        "groupOptions": [
            {
                "label": "Campaign 1",
                "value": 1
            }
        ]
    },
    {
        "label": "B2B campaigns",
        "value": "B2B campaigns",
        "groupOptions": [
            {
                "label": "Campaign 2",
                "value": 2
            }
        ]
    }
]

原因分析 #

出现这个问题主要有两个关键点：

1. Key值重复：生成分组内的MenuItem时，使用了外层循环的索引ind作为key，若分组内存在多个选项，会导致同一分组内的MenuItem key重复。React依赖key识别元素唯一性，重复key会引发组件状态混乱，进而让Select误判选中第一个选项。
2. 类型不匹配+分组逻辑异常：初始值为空字符串（string类型），但分组选项的value为数字（number类型），严格相等匹配本应不生效，但在包含<ListSubheader>的分组场景下，MUI Select的内部逻辑可能出现异常，自动选中第一个MenuItem。

解决方案 #

1. 修复MenuItem的Key值重复问题 #

为分组内的MenuItem生成唯一key，可结合分组标识与分组内索引，或直接使用选项自身的value（需确保value全局唯一）：

opt.groupOptions.map((val, idx) => (
  // 用分组的value+分组内索引生成唯一key
  <MenuItem key={`${opt.value}-${idx}`} value={val.value}>{val.label}</MenuItem>
))

2. 添加空默认选项 #

在Select的子元素最前面添加一个value为空字符串的MenuItem，让初始值能明确匹配到该空选项，避免组件自动选中其他选项：

<Select ...>
  <MenuItem value="" disabled>请选择</MenuItem>
  {generateOptions(options)}
</Select>

3. 统一Value类型 #

如果业务场景允许，将初始值的类型与选项value的类型统一，比如将初始值设为undefined，同时在onChange回调中处理对应逻辑，避免因类型不匹配引发的异常。

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