Material UI Autocomplete clearOnBlur clears when false

Viewed 2482

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

2 Answers

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.

Edit laughing-mountain-k1ie1

Try using the latest version of the material UI, It's always good to use the latest version.

Try this sandbox with the latest version of MUI.

This is adapted from the documentation demo sandbox from here.

Related