• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

113
Vistas
MUI Autocomplete filterOptioms still displaying all options

Hello everyone,

A bit of a weird one now. I have a heavily customized Autocomplete due to restrictions and other use-cases. I now have an issue with the filter. It's still displaying all options available. I console.logged the filter result itself and this does correctly work. When I log it I only see the filtered values. THing is, all options stay displayed. None are filtered.

In short;

  • When I log the result from filterOptions it is correct. For example, I search for "Netherlands", it only displays the relevant result. options.filter() does it's job right.
  • This results are not displayed. The Autocomplete still shows all values.

What's going wrong here? Do I handle something wrong or is something else at play?

<Autocomplete
  options={allCountries}
  onChange={(event, newValue) => {
    if (!newValue || !newValue[1] || !newValue[1].phone) return;

    setPrefix(newValue[1].phone);
  }}
  value={allCountries.find(
    (nestedArray) => nestedArray[1].phone === prefix
  )}
  autoHighlight
  getOptionLabel={(option) => `+${option[1].phone}`}
  renderOption={(props, option) => (
    <Box
      component="li"
      sx={{ "& > img": { mr: 2, flexShrink: 0 } }}
      {...props}
    >
      <img
        width="20"
        src={`https://flagcdn.com/w20/${option[0].toLowerCase()}.png`}
      />
      {option[1].name} (+{option[1].phone})
    </Box>
  )}
  filterOptions={(options, state) => {
    if (state.inputValue === "") return options;

    const query = state.inputValue.toLowerCase();

    return options.filter((option) => {
      return `${option[1].name.toLowerCase()} (+${
        option[1].phone
      })`.includes(query);
    });
  }}
  renderInput={(params) => (
    <TextField
      {...params}
      label="Prefix"
      inputProps={{
        ...params.inputProps,
      }}
    />
  )}
/>
almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

As far as I can see you're updating only the value prop after the prefix has been changed. But, besides that you have to update the inputValue prop too, which is responsible for the value displayed in the textbox:

const [inputValue, setInputValue] = React.useState('');

...
    inputValue={inputValue}
    onInputChange={(event, newInputValue) => {
        setInputValue(newInputValue);
    }}
...
almost 3 years ago · Juan Pablo Isaza Denunciar

0

const [allCountries, setAllCountries] = useState([
                                                  //initial Options 
                                                 ]);
const onChange= (inputValue )=>{
   if (inputValue === "") return options;

const query = inputValue.toLowerCase();

let list = options.filter((option) => {
  return `${option[1].name.toLowerCase()} (+${
    option[1].phone
  })`.includes(query);
});
 setAllCountries(state=>(list))

}

autocomplete props:

onChange={(e, value) => onChange(value)}
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda