Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

203
Visualizações
Material UI Autocomplete clearOnBlur clears when false

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

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

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

about 4 years ago · Juan Pablo Isaza Relatório

0

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.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda