MUI Autocomplete关闭后自动重开且失焦问题求助

问题描述 #

在React项目中使用MUI的Autocomplete组件时出现异常：尝试关闭组件下拉面板时，输入框先失去焦点，随后下拉面板自动重新展开。相同代码在CodeSandbox中可正常运行，但本地项目中无法正常工作。

使用的Autocomplete代码：

<Autocomplete
  options={["The Godfather", "Pulp Fiction"]}
  sx={{width: 300}}
  renderInput={(params) => <TextField {...params} label="Movie"/>}
/>

包版本：@mui/material": "^6.1.2"

可能的原因及排查方向 #

• 全局事件监听干扰：项目中若存在全局focus事件监听（如document.addEventListener('focus', ...)），可能在Autocomplete输入框失去焦点时触发强制聚焦逻辑，导致下拉面板重新展开。建议检查全局事件绑定代码，尤其是涉及元素聚焦的逻辑。

• 组件重复渲染导致状态重置：若Autocomplete所在的父组件存在不必要的重复渲染，会导致Autocomplete内部状态无法正确保留。可尝试用React.memo包裹Autocomplete所在组件，或排查父组件的props/state是否存在无意义的更新。

• MUI版本潜在bug：当前使用的6.1.2版本可能存在Autocomplete交互逻辑的bug。建议升级到最新的6.x稳定版本，或降级至6.1.0等版本测试是否解决问题。

• 样式或第三方库冲突：项目中的自定义样式、CSS-in-JS配置或其他UI库可能与MUI的样式冲突，比如覆盖了输入框的focus状态样式、设置了异常的z-index值，导致下拉面板关闭后输入框意外触发焦点事件。可临时移除自定义全局样式，逐步排查干扰源。

• 表单上下文干扰：若Autocomplete嵌套在Formik、React Hook Form等表单库中，表单状态同步逻辑可能强制输入框重新聚焦，引发下拉面板展开。建议检查表单库的验证、状态更新配置，是否存在自动触发字段聚焦的逻辑。

快速排查步骤 #

1. 在项目中创建独立的测试组件，仅包含上述Autocomplete代码，验证是否能复现问题，排除父组件的影响。
2. 临时移除全局事件监听、自定义全局样式，逐步恢复以定位干扰源。
3. 更换MUI版本，测试版本差异是否导致问题。

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