In a recent project, I am using Material UI's Autoplete. There I do not want the input field to be cleared, so I use the clearOnBlur property set to false.

Even then, the Autopleter clears the input field after focus is lost.

Would appreciate the help!

Here is an example:

=/src/ComboBox.js

In a recent project, I am using Material UI's Autoplete. There I do not want the input field to be cleared, so I use the clearOnBlur property set to false.

Even then, the Autopleter 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

• javascript
• reactjs
• autoplete
• material-ui

• The code is attached is working successfully. Whats' the problem? – Majid M. Commented Sep 15, 2021 at 8:05
• The input is NOT supposed to be cleared. – dsudo Commented Sep 15, 2021 at 8:10
• @Julien You may be right! I tried some of their examples in their own CodeSandbox and there the clearOnBlur feature also does not work. Thanks for the hint! – dsudo Commented Sep 15, 2021 at 8:31
• 1 I made this sandbox, codesandbox.io/s/material-demo-forked-h8sol, from the playground demo,material-ui./ponents/autoplete/#playground. Input is not cleared on blur. Sorry, deleted my ment above. – Julien Commented Sep 15, 2021 at 8:36
• 1 Thanks for the sandbox! I just found out it has been fixed recently in this PR github./mui-org/material-ui/pull/28190. – dsudo Commented Sep 15, 2021 at 9:06

2 Answers 2

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 (
    <Autoplete
      ref={Combo}
      onChange={(e) => {
        setValue(e.target.value);
      }}
      onSelect={(e) => {
        setValue(e.target.value);
      }}
      filterOptions={filterOptions}
      id="bo-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.

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.