Estoy tratando de crear un componente que tenga la opción de mostrar un historial de selecciones u ocultar la entrada. Esto se debe a que el usuario puede querer ocultar los datos si están en público, pero quiere la comodidad de ver los valores anteriores si no lo están. Tengo el siguiente componente.

 const SensitiveTextField: FunctionComponent<any> = ({ ...props }) => { const [showData, setShowData] = useState(false); useEffect(() => { (async () => { const storage = new ApplicationStorage(); const showFieldData = props.name ? await storage.getShowSensitiveFieldData(props.name) : false; setShowData(showFieldData ?? false); })(); }, []); const onVisibilityChange = () => { setShowData((value) => { const newValue = !value; if (props.name) { const storage = new ApplicationStorage(); storage.setShowSensitiveFieldData(props.name, newValue); } return newValue; }); }; const renderInput = (params: any) => { return ( <TextField {...params} type={showData ? 'text' : 'password'} InputProps={{ ...params.InputProps, endAdornment: ( <InputAdornment position="end"> <IconButton onClick={onVisibilityChange} onMouseDown={onVisibilityChange} > {showData ? <VisibilityOff /> : <Visibility />} </IconButton> </InputAdornment> ), }} /> ); }; return ( <Autocomplete {...props} renderInput={(params) => renderInput(params)} /> ); };

entonces la idea es que cuando showData sea falso, la entrada se ocultará y también las opciones. Traté de hacer esto filtrando las opciones a nada, pero todavía aparece un componente vacío. Traté de crear un renderOptions personalizado que solo crearía un componente vacío, pero apareció el mismo pequeño bit. El autocompletado usa el componente Popper, ¿hay alguna manera de configurar ese componente popper para que no se represente en absoluto dentro del Autocompletar?

Aquí es donde invoco SensitiveAutocomplete

 <SensitiveAutocomplete name={item.key} fullWidth size="small" onChange={onUserDefineValueChange(item.key)} label={inputLabel(item.key)} value={item.value} options={item.history} />