Material Design Autocomplete组件滚动时自动选中值问题求助

我之前也踩过这个Material Design Autocomplete的滚动坑，滚动下拉菜单时误选中选项确实挺烦人的，尤其是移动端触摸滚动的场景。给你几个经过验证的解决思路：

方法1：滚动时临时禁用选项交互 #

核心思路是在滚动过程中，让下拉菜单里的选项暂时不响应任何指针事件，滚动停止后再恢复。这样就能避免滚动时误触发选中逻辑。

// 获取下拉菜单容器（根据你的实际类名调整）
const dropdownMenu = document.querySelector('.mdc-autocomplete__menu');
let scrollTimeout;

dropdownMenu.addEventListener('scroll', () => {
  // 滚动开始时禁用所有指针交互
  dropdownMenu.style.pointerEvents = 'none';
  
  // 防抖处理：滚动停止150ms后恢复交互（时间可根据需求调整）
  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(() => {
    dropdownMenu.style.pointerEvents = 'auto';
  }, 150);
});

方法2：阻止滚动状态下的选中事件 #

如果不想完全禁用交互，可以通过标记滚动状态，在滚动时阻止选项的mousedown/touchstart事件，避免组件触发选中逻辑。

const dropdownMenu = document.querySelector('.mdc-autocomplete__menu');
let scrollTimeout;

// 标记滚动状态
dropdownMenu.addEventListener('scroll', () => {
  dropdownMenu.classList.add('is-scrolling');
  clearTimeout(scrollTimeout);
  scrollTimeout = setTimeout(() => {
    dropdownMenu.classList.remove('is-scrolling');
  }, 150);
});

// 给所有选项添加事件拦截
document.querySelectorAll('.mdc-list-item').forEach(item => {
  // 处理鼠标滚动场景
  item.addEventListener('mousedown', (e) => {
    if (item.closest('.mdc-autocomplete__menu').classList.contains('is-scrolling')) {
      e.preventDefault();
      e.stopPropagation();
    }
  });
  
  // 处理移动端触摸滚动场景
  item.addEventListener('touchstart', (e) => {
    if (item.closest('.mdc-autocomplete__menu').classList.contains('is-scrolling')) {
      e.preventDefault();
      e.stopPropagation();
    }
  });
});

方法3：React Material UI场景的适配 #

如果你用的是React版本的Material UI，直接通过MenuProps给菜单容器绑定滚动处理逻辑即可：

import Autocomplete from '@mui/material/Autocomplete';

// 组件内使用
<Autocomplete
  // 你的其他配置项
  options={yourOptions}
  renderInput={(params) => <TextField {...params} label="Autocomplete" />}
  MenuProps={{
    PaperProps: {
      onScroll: (e) => {
        const paper = e.currentTarget;
        paper.style.pointerEvents = 'none';
        clearTimeout(paper.scrollTimer);
        paper.scrollTimer = setTimeout(() => {
          paper.style.pointerEvents = 'auto';
        }, 150);
      }
    }
  }}
/>

问题根源 #

这个异常的本质是：浏览器在滚动（尤其是触摸滚动）时，会触发指针类事件（比如mousedown、touchstart），Material Design的Autocomplete组件默认会响应这些事件来选中对应选项，导致滚动时出现误触发的情况。上面的方法都是通过隔离滚动事件和选中事件的触发时机来解决问题。

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