使用 TextField 作为 MUI 自动完成的选项之一

Question

在 React 应用程序中，我使用 MUI 自动完成字段作为可搜索下拉列表。我试图使其中一个选项成为

TextField

，用户可以在其中填写一些文本。

渲染此文本字段工作正常，但我无法让它允许用户通过单击来选择文本字段。

有没有一种方法可以让用户突出显示此文本字段并开始在其中键入文本，而不关闭自动完成选项列表？

或者下面这个静态代码：

import "./styles.css";

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

export default function App() {
  const [selectedOption, setSelectedOption] = useState("");
  return (
    <Autocomplete
      options={["Option 1", "Option 2", "Option 3"]}
      renderInput={(params) => <TextField {...params} />}
      renderOption={(props, option) => {
        if (option == "Option 3") {
          return (
            <li {...props}>
              <TextField onClick={(e) => e.stopPropagation()} />
            </li>
          );
        } else return <li {...props}>{option}</li>;
      }}
      value={selectedOption}
      onChange={(_, newValue) => {
        if (newValue) {
          setSelectedOption(newValue);
        }
      }}
    />
  );
}

Answer 1

• 停止事件传播：使用 onMouseDown 和 onClick 处理程序来停止传播单击事件。
• 防止自动完成关闭：使用disableCloseOnSelect 属性来 确保单击文本字段不会关闭下拉菜单。

代码：

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

export default function App() {
  const [selectedOption, setSelectedOption] = useState("");
  const [inputValue, setInputValue] = useState(""); // TextField input value

  return (
    <Autocomplete
      options={["Option 1", "Option 2", "Custom Option"]}
      disableCloseOnSelect // Prevent closing on select
      renderInput={(params) => <TextField {...params} label="Select an option" />}
      renderOption={(props, option) => {
        if (option === "Custom Option") {
          return (
            <li {...props} onMouseDown={(e) => e.stopPropagation()}>
              <TextField
                value={inputValue}
                placeholder="Type here..."
                onChange={(e) => setInputValue(e.target.value)}
                onClick={(e) => e.stopPropagation()} // Prevent list close
                fullWidth
              />
            </li>
          );
        }
        return <li {...props}>{option}</li>;
      }}
      value={selectedOption}
      onChange={(_, newValue) => {
        if (newValue) {
          setSelectedOption(newValue);
        }
      }}
    />
  );
}