Within my React application, I have implemented a MUI Autocomplete field as a searchable dropdown. One of the options in this dropdown is a TextField, which should allow the user to input text.
The TextField renders correctly, but unfortunately, clicking on it does not activate it for typing.
Is there a way to enable users to select the TextField and start entering text without closing the Autocomplete list of options?
Edit based on feedback: The dropdown should closeOnSelect when choosing regular options.
https://i.sstatic.net/OlMZVj91.png
https://codesandbox.io/p/sandbox/65g99s
Alternatively, here is the code snippet:
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);
}
}}
/>
);
}