MUI Autocomplete移动端问题：点击下拉内容时取消输入框焦点

核心原因 #

MUI的Autocomplete组件下拉区域的点击事件会向上冒泡，触发组件内部的输入框聚焦逻辑，导致移动端自动唤起键盘。

解决方案 #

方法1：阻止可交互元素的事件冒泡

在下拉列表内的按钮等可交互元素的点击事件中调用event.stopPropagation()，阻止事件传递到Autocomplete的父级处理逻辑，避免输入框意外获焦。

示例代码：

import { Autocomplete, Button, TextField, ListItemText } from '@mui/material';

const options = [
  { label: '选项1', id: 1 },
  { label: '选项2', id: 2 },
];

export default function CustomAutocomplete() {
  return (
    <Autocomplete
      options={options}
      renderOption={(props, option) => (
        <li {...props}>
          <ListItemText primary={option.label} />
          <Button
            variant="outlined"
            size="small"
            onClick={(e) => {
              e.stopPropagation(); // 关键：阻断事件冒泡
              console.log('执行按钮操作', option.id);
            }}
          >
            操作
          </Button>
        </li>
      )}
      renderInput={(params) => <TextField {...params} label="选择选项" />}
    />
  );
}

方法2：禁用选择时的自动聚焦（可选）

如果场景不需要在选择选项后让输入框聚焦，可启用disableFocusOnSelect属性，从根源减少输入框意外获焦的可能：

<Autocomplete
  disableFocusOnSelect // 选择选项时不触发输入框聚焦
  // 其他配置属性
/>

效果验证 #

添加event.stopPropagation()后，点击按钮只会执行自身逻辑，不会触发Autocomplete的输入框聚焦逻辑，移动端键盘就不会被意外唤起。

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