In a recent project, I am using Material UI's Autocomplete.
There I do not want the input field to be cleared, so I use the clearOnBlur property set to false.
Even then, the Autocompleter clears the input field after focus is lost.
Would appreciate the help!
Here is an example:
https://codesandbox.io/s/blue-moon-2bk87?file=/src/ComboBox.js
It seems that in material-ui 5.0.0-beta which you're using it has problem. In 4.12.3 it's working properly. Please check out this codesandbox:
const ComboBox = function () {
const [value, setValue] = useState("");
const Combo = useRef();
const onBlur = (e) => {
Combo.current.inputValue = value;
};
const filterOptions = (options, state) => {
return options;
};
return (
<Autocomplete
ref={Combo}
onChange={(e) => {
setValue(e.target.value);
}}
onSelect={(e) => {
setValue(e.target.value);
}}
filterOptions={filterOptions}
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
onBlur={onBlur}
clearOnBlur={false}
inputValue={value}
renderInput={(params) => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
/>
);
};
I tried to set the input value manually but because of the material-ui version, It doesn't work.