Hola a todos,
Un poco raro ahora. Tengo un Autocompletar muy personalizado debido a restricciones y otros casos de uso. Ahora tengo un problema con el filtro. Sigue mostrando todas las opciones disponibles. Console.registré el resultado del filtro en sí mismo y esto funciona correctamente. Cuando lo registro solo veo los valores filtrados. La cosa es que todas las opciones permanecen mostradas. Ninguno está filtrado.
En breve;
options.filter() hace bien su trabajo.¿Qué está yendo mal aquí? ¿Manejo algo mal o hay algo más en juego?
<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, }} /> )} />Por lo que puedo ver, está actualizando solo la propiedad de value después de que se haya cambiado el prefijo. Pero, además de eso, también debe actualizar la propiedad inputValue , que es responsable del valor que se muestra en el cuadro de texto:
const [inputValue, setInputValue] = React.useState(''); ... inputValue={inputValue} onInputChange={(event, newInputValue) => { setInputValue(newInputValue); }} ...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)) }accesorios de autocompletar:
onChange={(e, value) => onChange(value)}