Material UI Autocomplete自定义Popper组件选中选项时页面自动滚动至顶部问题

我之前处理过一模一样的场景，这个问题大多是因为选中选项时Autocomplete默认会把焦点移回输入框，触发了浏览器的自动滚动行为。试试下面这几个解决方案：

方案1：禁用选中后的焦点恢复 #

给Autocomplete添加restoreFocus={false}属性，阻止组件在选中选项后自动将焦点移回输入框，这样就不会触发浏览器的滚动行为：

<Autocomplete
  multiple
  PopperComponent={PopperMy}
  restoreFocus={false}
  // 其他属性...
/>

⚠️ 注意：这个方法可能会影响无障碍访问性，如果需要兼顾，你可以手动在onChange事件中处理焦点逻辑，比如在合适的时机将焦点放回输入框，但避免触发滚动。

方案2：调整自定义Popper的定位与修饰符 #

修改你的自定义Popper组件，通过Material UI Popper的modifiers属性来优化定位，同时确保不会触发不必要的滚动：

const PopperMy = function (props) {
  return (
    <Popper
      {...props}
      style={{ width: "fit-content" }}
      placement="bottom-start"
      modifiers={{
        preventOverflow: {
          enabled: true,
          boundariesElement: 'viewport',
        },
        flip: {
          enabled: true,
        },
      }}
    />
  );
};

这个配置让Popper始终在视口范围内显示，避免因为Popper位置偏移导致的焦点滚动问题。

方案3：阻止选项点击时的默认滚动行为 #

如果上面的方法都不生效，可以尝试在选项的点击事件中阻止默认行为。你可以通过Autocomplete的renderOption来自定义选项，并添加事件处理：

<Autocomplete
  multiple
  PopperComponent={PopperMy}
  renderOption={(props, option, { selected }) => (
    <li
      {...props}
      onClick={(e) => {
        e.preventDefault();
        // 手动触发选中逻辑
        props.onClick(e);
      }}
    >
      {option.label}
    </li>
  )}
  // 其他属性...
/>

这个方法直接在选项点击时阻止默认的滚动行为，同时保留原本的选中逻辑。

你可以先试方案1，这个是最直接的，通常能解决问题。如果需要兼顾无障碍，再结合方案2或3调整。

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