MUI AutoComplete自定义Paper组件输入框无法获焦问题

问题场景 #

在MUI Autocomplete组件中，我们替换默认的Paper组件，在弹出层顶部添加了筛选输入框，但点击该输入框时无法正常获焦，无法输入内容。

问题原因 #

自定义Paper组件的根元素上绑定了onMouseDown={(e) => e.preventDefault()}，这个操作阻止了鼠标按下事件的默认行为。而输入框获取焦点依赖于mousedown事件的默认行为触发，因此导致输入框无法正常获焦。

解决方法 #

移除Paper根元素上的onMouseDown阻止默认行为的代码，让输入框的mousedown事件可以正常触发默认的获焦逻辑。

修改后的自定义Paper组件 #

import TextField from "@mui/material/TextField";
import { Paper, FormControlLabel, Checkbox } from "@mui/material";
import { useRef, useState } from "react";

const SearchPaper = (props) => {
  const [searchText, setSearchText] = useState("");
  const searchTextRef = useRef<HTMLInputElement>(null);

  return (
    <Paper>
      <FormControlLabel
        control={<Checkbox defaultChecked />}
        label="Label"
        slotProps={{
          typography: {
            onClick: (e) => e.preventDefault(),
          },
        }}
      />
      <TextField
        sx={{ p: 1 }}
        size="small"
        fullWidth
        autoFocus
        placeholder="输入关键词筛选..."
        value={searchText}
        inputRef={searchTextRef}
        onChange={(e) => setSearchText(e.target.value)}
      />
      {props.children}
    </Paper>
  );
};

对应的Autocomplete配置 #

<Autocomplete
  disablePortal
  disableCloseOnSelect
  id="combo-box-demo"
  options={top100Films}
  sx={{ width: 300 }}
  renderInput={(params) => <TextField {...params} label="电影" />}
  slots={{ paper: SearchPaper }}
/>

额外说明 #

如果原本添加onMouseDown阻止默认行为是为了避免点击弹出层时关闭下拉框，Autocomplete已经提供了disableCloseOnSelect属性可以保留下拉框打开状态，无需通过阻止事件默认行为来实现。

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