iframe中点击Material UI Select组件自动滚动到顶部如何解决

iframe环境下点击Material UI的Select组件，会触发页面自动滚动到顶部，严重影响使用体验。
该问题仅在React应用被嵌入iframe时出现，脱离iframe独立运行时Select组件功能完全正常。涉及问题的组件代码如下：

<Select
  variant="outlined"
  IconComponent={KeyboardArrowDown}
  labelId="demo-simple-select-label"
  style={{ marginRight: "10px", fontSize: Theme.typography.caption.fontSize}}
  placeholder={Content?.expiryMonthPlaceHolder}
  id="expirationMonth"
  value={expirationMonth}
  label="MM"
  className={classes.cardmonth}
  onChange={e => {
    setExpirationMonth(e.target.value);
  }}
>
  {months.map(month => (
    <MenuItem key={month} value={month} autoFocus={true} style={{ fontSize: Theme.typography.caption.fontSize }}>
      {month}
    </MenuItem>
  ))}
</Select>

异常滚动是MenuItem上配置的autoFocus={true}导致的：

• Select下拉展开时，所有循环渲染的MenuItem都会因为该属性尝试抢占焦点
• iframe属于独立的浏览上下文，元素触发focus事件时，浏览器默认执行的「将聚焦元素滚动到视口」逻辑会出现计算偏差，MUI Select的下拉弹层默认挂载在body节点，焦点触发的滚动定位失准，就会直接把页面滚动到顶部
• 非iframe环境下不存在跨上下文的滚动计算偏差，因此不会触发该异常。

• 直接删除MenuItem上的autoFocus={true}配置：MUI Select组件打开下拉时会自动处理当前选中项的焦点逻辑，不需要手动给MenuItem添加自动聚焦属性，删除后即可解决绝大多数场景下的滚动问题。
• 如果删除autoFocus后仍存在滚动异常，可以给Select组件追加disableScrollLock={true}属性，关闭组件默认的滚动锁定逻辑，避免弹层打开时篡改页面滚动位置。

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