如何让MUI Autocomplete中的TextField选项可聚焦编辑且不关闭下拉列表

我明白你遇到的问题了——在MUI Autocomplete里加了一个可输入的TextField选项，但一点击它下拉面板就收起来，根本没法正常输入；同时普通选项还要保持点击后关闭的默认行为对吧？我帮你调整代码，完美解决这个问题：

修改后的完整代码 #

import "./styles.css";

import { Autocomplete, TextField } from "@mui/material";
import { useState } from "react";

export default function App() {
  const [selectedOption, setSelectedOption] = useState("");
  // 手动控制下拉面板的显示/隐藏状态
  const [open, setOpen] = useState(false);
  // 单独存储自定义选项的输入内容
  const [customInputValue, setCustomInputValue] = useState("");

  return (
    <Autocomplete
      options={["Option 1", "Option 2", "Option 3"]}
      renderInput={(params) => <TextField {...params} label="Select an option" />}
      renderOption={(props, option) => {
        if (option === "Option 3") {
          return (
            <li {...props}>
              <TextField
                value={customInputValue}
                onChange={(e) => setCustomInputValue(e.target.value)}
                onClick={(e) => {
                  // 阻止事件冒泡到父级选项容器，避免触发Autocomplete的面板关闭逻辑
                  e.stopPropagation();
                }}
                placeholder="Enter custom value"
                fullWidth
              />
            </li>
          );
        } else {
          return (
            <li
              {...props}
              onClick={() => {
                setSelectedOption(option);
                // 选择普通选项后主动关闭下拉面板，保持原有默认行为
                setOpen(false);
              }}
            >
              {option}
            </li>
          );
        }
      }}
      value={selectedOption}
      onChange={(_, newValue) => {
        if (newValue) {
          setSelectedOption(newValue);
        }
      }}
      // 绑定受控的面板状态
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      // 禁用自动高亮，避免焦点意外选中选项
      autoHighlight={false}
    />
  );
}

关键修改说明 #

1. 手动控制面板状态：新增open状态接管Autocomplete的面板显示/隐藏，替代默认的无控模式，让我们能精准决定什么时候关闭面板
2. 分离自定义输入状态：用customInputValue单独存TextField的输入内容，和原有选项的选中状态解耦，避免相互干扰
3. 差异化处理选项点击逻辑：
   • 普通选项：点击时设置选中值并主动关闭面板，保留原有交互习惯
   • 自定义TextField：通过e.stopPropagation()阻止点击事件冒泡到父级选项，彻底避免触发Autocomplete的面板关闭逻辑，同时独立处理输入更新
4. 优化细节：加上autoHighlight={false}防止焦点移动时意外选中其他选项，提升输入体验

这样修改后，你点击普通选项会像以前一样选中并关闭下拉；点击Option3的TextField时，下拉面板会保持打开状态，你可以直接输入内容，完全不受影响。

备注：内容来源于stack exchange，提问作者KoenCuijp